Making Old Site Responsive

[mdoyle]

If anyone can help me find the problem to this I would greatly appreciate it. I can’t seem to figure out why I have a horizontal scroll bar at the bottom of this site in mobile, specifically a phone’s portrait view. There is also a little shifting on a tablet too, but the phone is more dramatic.

http://dorothykrause.com/

I’m sure a width is set wider than it should be but I cannot seem to find it.

Thanks in advance.

[mdoyle]

Thanks Senff,

I think that helped.

[David Schiffner]

One issue that I see is your media queries.
What I’m seeing is that when you change the window size the site goes from
Full> max-width: 768px> max-width: 580px> then it goes back up to max-width: 768px when the browser is as small as can be

With that said, your media queries need to be updated and your width values for .span9 (your main content area) will need to be changed as it does not properly scale down when the window has a small width. You may need to make some edits to the css of the slider as well.

Hope this helps!

[mdoyle]

Thanks David,

I’m not the best with media queries. I have

@media screen and (max-width:336px) and (orientation : portrait) {
body, #wrapper, .container {
max-width: 320px;
width: 100%;
}
.span8, .span6, .span3, .span9 {
max-width: 300px !important;
width: 94%;
float: none;
display: block;
padding: 0% 3%;
}
}

–So I am not seeing where you see that the max width goes back up to 768px? But I believe you, because I have the hor. scroll bar that seems to extend that width.

[Author]

Posts