Overflowing content - html

I am trying to create a mobile page that resizes for different devices.
So far so good but I cannot figure out why extra space is being added to the right of the page. I even tried hiding overflow and other hacks.
The issue appears when looking at the page on a mobile device.
Any help?
Here's the page:
http://pages.purolator.com/mobile
Also, there is padding being added as the tab section expands. Can't figure that out either.
Thanks!

Remove the padding from .pageHeader and it fixed it.
Try this:
padding-top: 15px;
padding-bottom: 15px;
Edit:
This will mess with the padding for your logo. So you will want to add this to your css:
.pageHeader img {
padding-left: 15px;
}

Related

how do I Increase post width in wordpress blog

I've been trying to increase the width of the post container in my theme.
The thing is that, I can't seem to get it working. I've tried editing my style.css, but it just doesn't work.
I have added a RIGHT sidebar via "STYLE" plugin.Everything seems fine. I have tried increasing the content widht.. didn't work.
I've got a child theme, so, it's all good.
Here are the screen shots to my page :-
Finally.. I got it to work..
.content-sidebar,.primary-sidebar {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
}
Had to adjust the paddings on the right sidebar... edited the style.css file...

Unwanted white space on right site (small screen only)

I have a responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home
For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!
Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }
When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.

Part of background cut off on mobile

I have a weird background bug on my site, http://www.andytechguy.com/ . You can see that when you go on a mobile browser and search the site, a part of the gradients at the top get chopped off. I have no idea what is going on with that, I didn't add anything to make that happen and it doesn't look good. Please help?
The problem is that #main_part has a fixed width of 1050px. But the rest of the site is assuming the width is about 980px. (980px in my mobile)
Just add a css rule like this:
html {
width: 1050px;
}
And you'll notice that the top bar is not longer chopped off.
However, that annoying horizontal scroll may still be there (but this time without empty space)
Nothing of this is a replacement to actually create a responsive website. That in the end is the real solution. May I suggest that you convert your website to bootstrap?
From what I can tell your h2 text is larger on mobile vs desktop. This probably has to do with font rendering and your reltive size of 1.5em.
Your background gradient is 70px tall. On mobile it is repeating itself since the header's height is greater than 70px.
I would modify your CSS like so:
CSS
#section h2 {
/* remove this */
padding: 20px;
/* add these two */
height: 70px;
line-height: 70px; /* this will vertically align the text */
}
Move your div inside "container" class and create your own custom class like below:
.custom-container{
min-width: 100%;
padding-right: 0;
padding-left: 0;
}
overall, write this
<div class="container custom-container">
<!-- ... -->
</div>

CSS styling problems

I'm a beginner and I have been battling to get this site to work as desired. Thanks to advice on this forum to include an IE7 specific style sheet I am almost there, but with a couple of minor issues remaining. Some of the styles just won't work and I'm starting to despair! I have three issues and if anyone can shed some light on these I'd be super happy!
Across all browsers (both stylesheets), 'main p' text padding on the right is only appearing on pages 'studios.htm' and 'contactus.htm' - I have no idea why and have tried playing around with all the styles without success.
On the 'location.htm' page I am unable to position the footer "behind" the Google Map, like the picture rows are positioned on the other pages. I have tried changing margins, padding and z-index, but nothing seems to change it - I can manage to position the footer in the right place but the Google Map stays "behind" it so that the bottom part of it can't be seen.
On IE7 ONLY: CSS text formatting doesn't seem to change the font size at all. As a result the text is too large and on pages 'studios' and 'thingstodo', this results in the very bottom part of the text to go down too low and hide behind images. If the text was the right
The site is here: http://bit.ly/gaAthc
Main CSS: http://jsfiddle.net/ykbhd/
IE7 specific CSS: http://jsfiddle.net/bdwrY/
Thanks in advance!
1) The reason this appears correct sometimes is simply how the text breaks in your paragraphs. Your p tags are taking the full width of your main div, so putting right padding isn't doing to help. Instead, just put some padding on your image.
Line 190:
#target2
{
float: right;
padding-left: 5px;
}
2) You can use negative margins the same way you do for the picture rows.
Line 178:
#googlemap
{
margin-bottom: -130px;
}
3) Remove margin-bottom: -10px; from this rule:
#container #main #rotxt
{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 0.8em;
margin-top: 35px;
padding-left: 1px;
}
Update
For the Google map footer issue in IE7, try adding this rule to a IE7 stylesheet (see here for info on conditional comments):
#footer
{
z-index: -1;
position: relative;
}
Add overflow: hidden; to #main p

Problem with CSS for mobile website

I am building this mobile website.
If you check it on your mobile browser it should fit in such that there is no horizontal scrolling. (Content should only be vertically stacked).
Can someone help me in fixing the CSS of the page. Just let me know what the correct CSS should be so as to auto adjust for different mobile phones.
CSS of this page can be found here. Basically, two main components I guess. (body and content).
Also, I used this mobile website as a sample. Please refer to its inline CSS by viewing the source of that page.
Thanks
Okay, so it seems that your #content div is actually pushing the boundaries of the screen even on my large firefox browser. In your CSS you have it declared like so:
#content{
width:100%;
margin: 0;
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
I have confirmed by editing the CSS locally, that your padding is actually pushing the boundaries of the 100% width div, but the good news is that since it's a block level element it already fills all of the room available to it. Try get rid of the "width:100%;" and see if that works for you. It will still display exactly the same, but without those scroll bars.
So something like this:
#content{
padding: 20px;
background: white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}