Hi guys, I’ve done this site from a template started by someone else (crap I know)
but when I move from portrait to landscape or the navbar starts being “sticky” in fixed position, it somehow enlarges the screen width for some reason.
Can you have a look and let me know what’s wrong? I’ve set some media to reduce the width of the navigation bar but the page still enlarges causing a swipe horizontal problem.
It looks like the seconds on the countdown thing is messing with the page width giving you horizontal scrollers.
Though to be honest, I don’t see any obvious fix, just looking at the code is making my head spin. How many style sheets?
Yeah that theme is horse crap anyway thanks for the tip I’ll have a look. If anyone can fix it before me please let me know! Thanks Sam
Hi,
You have a couple of problems.
First you have given a width of 130% to a footer element which is always going to cause problems. You need to set it to 100% or auto.
#menu-footer{
width:100%!important;
}
It seems you gave it that width to force the content wider but as you are using bootstrap columns you should instead change the column arrangement to fit the content better. re-do those columns in the footer so that they match the content better.
The second issue is with the countdown timer which you have placed in a div of 33% wide yet the countdown timer has a min-width of 420px which means that very soon 33% is never big enough to hold the timer and you get scrollbars.
This is why I hate the bootstrap floated grid because it assumes all content can compress which isn’t always the case. What you should do is ignore the grid for the countdown timer and the item to the left of it to it and use display:table (width:100%) for that row and display:table-cell for the two items. This will allow both to take up as much room as needed without the need for widths and give you equal coloured background columns into the bargain. Then in the media queries change the display:table-cell to display:block when two items can no longer fit side by side nicely.
If you don’t want to use the display:table approach then you will need to set a media query to trigger those two items to be non floated a lot sooner than you are doing already.
The strange thing is at about 767px the countdown moves to fit on the page, but that white empty space remains on the right. I something else causing it?
This could be the culprit:-
The sticky nav set at 640px !important
Ah, Paul, missed you post there, if anyone could sort this…
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.