Metro Pro – Home middle left & Home middle right Question

Community Forums Forums Design Tips and Tricks Metro Pro – Home middle left & Home middle right Question

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  computerkitten 6 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #64881

    computerkitten
    Participant
    Post count: 101

    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
    #64898

    Jeremy
    Participant
    Post count: 55

    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

    • This reply was modified 6 months, 2 weeks ago by  Jeremy.
    • This reply was modified 6 months, 2 weeks ago by  Jeremy.
    #64900

    computerkitten
    Participant
    Post count: 101

    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!

    #64901

    computerkitten
    Participant
    Post count: 101

    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!!

    #64927

    Jeremy
    Participant
    Post count: 55

    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

    #65021

    computerkitten
    Participant
    Post count: 101

    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!!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.