I tried to set the height of my webpage to auto with no success. When the text grows, it overlaps the footer. Any ideas where I am getting it wrong? I want to extend the .main class when the text grows.
.main {
background-position: right bottom;
min-height: 1200px;
background-color: #FFFFFF;
background-image: url('../images/side-shape.png');
background-repeat: no-repeat;
height:auto !Important;
}
just remove this line from your footer class
margin-top: -175px;
Looks like you need to clear the float you have in your left column. Put clear: both; in your footer_wrapper and that should fix this.
Related
I'm seeing this star rating problem on my site:
https://goldenshop.be/product/golds-gym-strength-stringer-goud/
As you can see, the first star seems to have a duplicated half star in the background. How can I remove this bug?
Thanks in advance for the support!
change this in css codes :
.woocommerce .star-rating span {
text-indent: 999px;
left: 0px; <----- 2px to 0px
}
.woocommerce .star-rating span::before
{
text-indent: 0px; <----- -2px to 0px;
}
Trying to update look and feel of jqgrid.
I am trying to increase the font size of the data in the grid as well as of the column header.
Here is my jsfiddle
https://jsfiddle.net/4ga1ekh3/69/
Using the code at
How to change the font size in jqGrid?
.ui-jqgrid {font-size:0.8em}
But this did not work.
I would also like to know how to increase the font of the various fields when of the edit form
Since no one answered here, I resolved this by using the below code:
.ui-jqgrid tr.jqgroup td {
font-weight: bold;
font-size: 12px;
}
.ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable {
font-size: 15px;
}
span.ui-jqgrid-cell-wrapper {
font-size: 16px;
}
td.jqgrid-rownum {
font-size: 15px;
}
I have slide where I set the paginationStyle="progress" how can I change the color of the progressbar?
<ion-slides #exercisesSlider pager paginationType="progress">
Could somebody provide me a way to change the color of the progressbar?
Ionic uses Swiper API slides. So you can select using class names swiper-pagination-progress and swiper-pagination-progressbar like this:
.swiper-pagination-progress .swiper-pagination-progressbar {
background:red;
}
Using only the CSS borders worked for me :
.swiper-pagination-progressbar-fill {
border: 2px solid rgba(175, 240, 122, 0.719);
border-radius: 5px;
}
.swiper-pagination-progressbar {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 5px;
}
Simple and maybe obvious follow up from the answer from #Surya Teja . If you separate the classes you can control which color for each part of the progress bar.
.swiper.pagination-progress {
background-color: red
}
.swiper-pagination-progressbar {
background-color: white
}
I am trying to create two divs using foundation.
I used this code:
<div id=”containerLeftWrap” class=”small-4 small-centered medium-offset-2 medium-2 medium-uncentered columns” >
…content…
</div>
<div id="containerRight" class="medium-7 columns">
<div id="aboutArea">
…content…
</div>
</div>
In small size it looks fine
but in the medium and large size it looks like this
instead of like this
I've tried to add:
style=”display:inline-block; vertical-align:top”
But then the first div (the smaller one) was stuck to the left side, in all sizes, like this:
Does someone have an idea how to solve this?
Thank you!!!!
Update:
I have this css:
#containerLeftWrap {
background-color: #262626;
height: 256px;
min-width: 245px;
padding-top: 28px;
border-radius: 7px;
margin-top: 60px;
}
#aboutArea {
width: 90%;
margin: 0 auto;
background-color: #262626;
border-radius: 7px;
padding-bottom: 15px;
}
The other day I had to prefix every single CSS selector with another tag in order to increase its specificity. I though I'd flex my regex muscles a bit and I came up with this regex:
(^(((\s)+)?(?!.+: )(?!\.IE)[a-z.].+?)([,{]))
The plan was to replace the entire captured match with something like 'body $1'. There are a couple of negative lookaheads to avoid matching lines like background-color: property and .IE selectors
The screenshot describes the problem:
Here is some sample text:
/* line 18, ../scss/SplashPage/_page.scss */
* {
-webkit-tap-highlight-color: transparent;
}
/* line 35, ../scss/SplashPage/_page.scss */
body header {
*zoom: 1;
background: #eaeaea;
}
/* line 221, ../scss/MainStyle/_mixins.scss */
body header:before, body header:after {
display: table;
content: "";
}
/* line 224, ../scss/MainStyle/_mixins.scss */
body header:after {
clear: both;
}
body .utility-nav {
right:0
}
/* line 40, ../scss/SplashPage/_page.scss */
body .home-link {
text-indent: -99999px;
white-space: nowrap;
overflow: hidden;
background: transparent url("~/images/clipsal-logo2.png") center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-image: linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-position: top left;
background-repeat: no-repeat;
display: block;
float: left;
/*width: 120px;
height: 50px;
margin: 20px 0px 15px 25px;*/
background-size: 100% auto;
}
I think it's the start of line anchor (^) that needs do be dropped. Having said that I am not sure what the regex should be :)
Note: I understand that the problem could have easily been solved using SASS, but where's the fun in that!
Thanks