Metro Pro – Home middle left & Home middle right Question

[computerkitten]

I have setup a test site at:

http://tinyurl.com/n7mgbx9

And I have Home Middle Left and Home Middle Right that I want content to be next to each other. I hesitate increasing the width on each of these sections, in fear that I will mess up the responsiveness look on other platforms.
How can I safely increase the content width of these two areas (right now I have one big blank hole in the middle between these 2 sections on the home page).

Please explain.

Thanks!!

http://tinyurl.com/n7mgbx9

[Jeremy]

As you guessed you just need to increase the width of these sections. Just make sure you also adjust the widths in the responsive breakpoint section at the bottom of your style.css

E.g.
In the style.css line 1200
.home-middle-left, .home-middle-right {
width: 532px;
}

Then in the style.css line 1992

@media only screen and (max-width: 1023px)
.home-middle-left, .home-middle-right {
width: 332px;
}
Note: These widths aren't perfect but I'm just using them as a quick demo. You may also need to adjust the padding to make it fit neatly. Best of luck!

---

If you want to say thanks Follow me on Twitter | My Website

[computerkitten]

Wow thank you! I will try this out!

How did you know that I should adjust the width though in the @media section of 1023 px? I'm confused by what adjustments I have to always make in the @media sections if I adjust the top section.

Thanks much!

[computerkitten]

I made the adjustment and have a further question about that... as I reduce the window size... it looks good, and then changes where there is a big blank area in the middle still, and then as I keep reducing the window size further it goes back together again and then it stacks like it should when the window is real small in width.

Why the blank area in the middle or should I worry about it?

Thanks!!

[Jeremy]

You should try not to use !important unless it is absolutely necessary, otherwise it can override other responsive design settings.

For some reasons you have...

.home-middle-left, .home-middle-right {
width: 730px !important;
}

within the @media only screen and (max-width: 1139px) area.
This results in the area being fixed and not responsive when viewed on mobile devices in portrait view.

---

If you want to say thanks Follow me on Twitter | My Website

[computerkitten]

Okay I think I got that fixed and so glad you pointed this out to me because of the !important being used on the widths... didn't even think of the fact it would cascade onto the Responsive section.

So thanks again, really appreciate it!!

[Author]

Posts