Сan you help me remove a white strip of a few pixels due to which a scrollbar appears below ?
Thank you very much and sorry for my English. Please correct me !
Link to the site
Sreenshort of this problem
Your Breadcrumb Style has few issues with CSS. Please copy the below code and past into the Customizer ->Additional CSS :
.breadcrumbs {
width: 100% !important;
}
Hope it will solve your issue.
in your CSS You have
html.html-has-lrm
{
overflow: auto !important;
}
change that to
html.html-has-lrm
{
overflow: hidden !important;
}
and your white strip will no longer be visible..
as i can see you are using caching plugin so don't forget to clear the cache after making changes..
Related
Can someone please help me edit the CSS for this website of mine for mobile sites, on the homepage?
Keep in mind that this is done through Wordpress and the theme I am using does NOT allow me to edit the theme CSS itself, however, I am using a plugin that allows me to add my own custom CSS to it. Take a look at this if you don't understand.
Please help me out. I've been trying to center all of the text in each sections for mobile but nothing is working someone help!
I can add code if needed be, thanks!
try putting this code on your site. It should fix the "Proven Success" section on mobile.
#media only screen and (max-width: 667px){
.categories .module-title {
left:0px !important
}
.categories .module-subtitle.font-serif.home-prod-subtitle {
left:0px !important;
}
.section-overlay-layer .module-subtitle.font-serif.home-prod-subtitle {
margin-left:0px !important;
}
.module-subtitle {
margin-left:0px !important;
}
}
I have a Wordpress child theme and I'm a bit frustrated at the excess white space between my image slider and footer. I've tried editing the style sheet in a few different ways
footer {
margin-top:-10px;
padding-top:-100px;
}
I've also tried:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
I see in the inspect element that it's this <section class="wpb_row vc_row-fluid block">. I'm confused about how to eliminate this white space.
Here's an image of what it looks like (my site isn't live yet) http://imgur.com/4vdRWBj
Thanks!
It's hard to tell without seeing your source. Have you tried adjusting bottom padding like so?
.vc_row.wpb_row.vc_row-fluid {
padding-bottom: 0 !important;
}
I have problem with image overflow on bootstrap. Tryed to put on img also on div. Maybe boostrap is overwriting my styles or something. Can anyone give me a suggestion how to fix this issue?
Screenshot
http://www.uzdra.lt/studija/
In your style.css 47 number line.Take a look and add belowcss.Or just
remove margin-bottom:-19px; from #galerija-seperator in your css.It will be worked.
#galerija-seperator {
background-image: url("../img/gallery-seperator.png");
width: 543px;
height: 38px;
overflow: visible;
}
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.
This is my HTML:
<div id="links">
Link 1
Link 2
Link 3
Link 4
</div>
And these are the CSS styles:
#links {
position: absolute;
border: 1px solid #000;
}
#links a {
display: block;
}
#links a:hover {
background-color: #CCC;
}
This displays a list of links, the problem is that in IE, I can only click a link by directly clicking the text link, which is not the case with other browsers (where you can click anywhere whether the text link or anywhere else as long as it's in the link block), is there any fix for that (with only CSS, no javascript)?
Please note that I don't want to specify a width for the links or the div.
I have had the same problem and none of the solutions above worked for me.
I also needed the background of the links to be transparent.
A very uncomfortable solution, but one that worked perfectly is to set the background to a transparent gif. Only needs to be 1x1 px as it will repeat.
#links a
{
display: block;
background: url(/images/interface/blank/1dot.gif);
}
This seems to have no side effects apart from one additional request to the server.
Put position:relative; in your CSS at #links a{ }
like this
It will fix it :)
Enclose the link text in a span element. Then it will accept clicks anywhere within its bounds.
I have no idea why, but giving the anchor a background color seemed to fix this problem for me.
Setting the background color to #FFF and an opacity of 0 worked for me in IE9, Chrome and Firefox. Don't know about other versions though. Setting it to transparent didn't help me.
This has the advantage of being pure CSS and cross-browser, so maybe it could be a better alternative.
Ok, the fix for this problem is to give the anchors a background property other than transparent. Some proposed to give the anchors a transparent background image. I have an addition to this: The image does not have to exist. You can simply write any path and it will make it work:
a {
background:url('dummy/doesnotexist.png') no-repeat;
}
Insert this inside your a-tag style:
background:url('images/dot.png') no-repeat;
where dot.png is a 1x1 transparent image.