Dear forum members,
I’m trying to stretch the homepage slider on mobile version to make it fullscreen and get rid of thick ugly white line, I made the screenshot: http://imgur.com/x5mPjzq
Could you please advice me how to do it? The site: http://boccamoka.com
I appreciate your help!
Soapmarine
The web site presents a very cool countdown calendar but no slider 
oops, sorry! open now.
can you check please?
Please see if this helps
It looks to me like there might be a media query that is activate at widths of 767px and less that is adding a couple of {margin-bottom:20px} being applied by grid.css (see lines 429 and 483). Duplicated styles tend to throw a wrench into simple troubleshooting.
Important! Each page is only allowed ONE <!doctype. This code CANNOT exist above your <!doctype
<!DOCTYPE html>
<script language="JavaScript">
TargetDate = "10/1/2014";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds ";
FinishMessage = "It is finally here!";
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://boccamoka.com/wp-content/plugins/ultimate-under-construction/includes/js/base.js"></script><script src="http://boccamoka.com/wp-content/plugins/ultimate-under-construction/includes/js/flipclock.js"></script><script src="http://boccamoka.com/wp-content/plugins/ultimate-under-construction/includes/js/dailycounter.js"></script><script src="http://boccamoka.com/wp-content/plugins/ultimate-under-construction/includes/js/flipclock.min.js"></script><link rel="stylesheet" href="http://boccamoka.com/wp-content/plugins/ultimate-under-construction/includes/css/flipclock.css">
<script type="text/javascript">
var clock;
$(document).ready(function() {
// Grab the current date
var currentDate = new Date();
var utccurrentDate = new Date(currentDate.getTime() + currentDate.getTimezoneOffset() * 60000);
// Set some date in the future.
var selecteddate = new Date("2014/10/1");
// Calculate the difference in seconds between the future and current date
var diff = selecteddate.getTime() / 1000 - utccurrentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
Hmm, as far as I know I have only one CSS stylesheet document: style.css
I have grid.css too? I dont see it, I’m sorry.
I applied this code snippet to stretch my slider on the desktop, because originally it dont.
Probably I used use this for @media screen selector too?
div#av_section_1 {
background-size: 100% 100%;
}
.fdm-menu li {
margin: 0;
}
body.page-id-9 .container {width: 100%!important; margin: 0 auto;}
body.page-id-9 #header_main {max-width:1030px; margin: 0 auto;}
body.page-id-9 .content {padding-top: 0px!important; padding-bottom: 0px!important; margin-top: -2px!important;}
#advanced_menu_toggle, #advanced_menu_hide { right: auto; left: 70%; }
This is a part of Coming soon page. Do you think it could something on my site?
oops, thank you!
I tried to get rid of this margin:
@media only screen and (max-width: 767px) {
margin-bottom: 0px;}
And still have this horrible white line on mobile. Where I’m wrong?
I do not know where you are wrong because I cannot see that code on your WordPress provided custom stylesheet,
<link rel='stylesheet' id='avia-custom-css' href='http://boccamoka.com/wp-content/themes/enfold/css/custom.css?ver=2' type='text/css' media='all' />
Also, I do not see any stylesheet named “style.css”
The WordPress stylesheet, grid.css, is still applying the margin-bottom in two places as I described above. You should be able to override it in the WordPress provided custom.css stylesheet.
Regarding the code above the <!doctype...
It is still there. I do not know where it comes from, or why it is there. I know that a page can only have one <!doctype and it should be the topmost line of code on the page.
If you do not know why the excess code is there, perhaps you should ask in the WordPress forum.
To tell the truth, I’m completely lost now…
I added this code
@media only screen and (max-width: 767px) {
margin-bottom: 0px;}
to the separate file as dynamic css, it's sort of of child css file. I did not add it to the custom.css` file because I’m scared to screw something completely as the site is online.
The code snippet is there but the page still have the white line on the bottom. But I think this margin-bottom: 20px; is responsible for the brown footer and not the cause of the white line.
Honestly, I’m lost. Should not this be responsible for the white line?
body.page-id-9 .container { margin: 0 auto; width: 100% !important;}
Could you advice, please? Thank you!
I get rid of the <!doctype... document, it served me as coming soon page.
@ronpat,
the problem was indeed in grid.css! I took the risk and replaced margin-bottom: 20px; by margin-bottom: 0px; in mobile portrait and lanscape and the ugly line dissapeared! youhuuuu!!!