Responsive Site Mobile Version to Wide

HTML & CSS
1

Hey Guys,

Having bit of trouble with mobile version of the site I’m working on.

Certain columns resize down to width of the window on Mobile devices but two divs don’t.

Heres the site…

http://www.rehance.ca

You will see that the content and the main slider don’t shrink down. How can I resolve this in the mediaqueries cause I set the columns to 100% so I wouldnt think they would go outside of this.

I still got some other stuff to do like resizing some fonts, but thats little stuff don’t see why the columns are going way to wide.

Thanks,

Mike

2

The width of the slideshow is being set by JavaScript, so that’s where the changes are needed. However, that may get messy. There are quite a few responsive image galleries out there these days that might be a better fit, such as bxSlider.

3

Thanks ralph.

I think I may just hide the slideshow all together on the mobile version.

What about the other sections?

Thanks,

Mike

4

You’ve got to be really careful and think ahead when building a site that needs to be responsive. As soon as you set a width like this, for example:

.grid {
width: 100%;
max-width: 1140px;
[COLOR="#FF0000"]min-width: 755px;[/COLOR]
margin: 0 auto;
overflow: hidden;
}

you need to be thinking about what will happen on small screens. Don’t leave it till later to worry about this, as you’ll find you have an almighty mess on your hands.

5

Hi ralph,

So should I just remove that min-width? I forgot that was in there.

Thanks,

Mike

6

Removing it does seem to fix most of the width issues, so yes, just remove it. It only gets in the way.

7

Excellent.

One other question on mobile when you click on Email Us the contact form is not on screen.

This is a plugin but how can I center it using some CSS I tried some stuff but it just would.

I’m sure that can be done just got to figure out how.

8

Which device(s) do you see that on? Works OK for me on my phone (iPhone).

9

Hey ralph.

Sorry didnt get chance to edit this post I got it resolved now.

Thanks,

Mike