locked
Div wrapping on small pads RRS feed

  • Question

  • Hi,

    While testing www.alamodephoto.com, I realized that it is wrapping the div #page_content in landscape mode ONLY on smaller pads.  I am confused as to why this would only be wrapping on smaller pads.

    Any help would be great.

    Best,

    Peter

    Thursday, August 24, 2017 1:37 AM

Answers

  • The breakpoint is where the media query kicks in, or out.  In your case, you have media query CSS that applies when the screen is max-width:1148px (at which, for example, .imag_framing width drops from 98% to 95%), and different CSS that kicks in when the screen is max-width 875px, notably #left_col becomes display:none and the #mobile-header becomes display:block (no longer display: none).   You can make the mobile menu kick in sooner by changing that value of 875px to a higher number, before the images shift over.  Or you can add another mobile query section with a max-width higher than 875 that changes the CSS styling of the images to make them smaller so they still fit until you reach 875 and the mobile menu.

    It is really no use to you to have someone change a site you are maintaining in ways you don't understand.  At the minimum google "media queries" and read up on what they are about.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    • Marked as answer by Petersocal Wednesday, September 6, 2017 3:47 AM
    Thursday, August 31, 2017 4:34 PM

All replies

  • Please be more explicit with your question.   Lines can wrap.  Floated or inline content that is beside other content can move down to new lines when there is no space for them.  Content whose CSS has changed from inline to block after a media query breakpoint will move to a new line.  And so on.  And "small tablets" doesn't tell us what you are looking at, either.

    Gradually resize your site in your desktop browser.  As it gets narrower, content moves.  What movement, of what content, exactly, is not what you expect to see at the width the browser is at?   Based on what you see, examine your media queries to see where you've not made the correct adjustments at the right breakpoints.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications



    • Edited by KathyW2 Friday, August 25, 2017 2:11 PM
    Friday, August 25, 2017 2:10 PM
  • Hi Katheen,

    Thanks for answering.   So, in the div #page content, on the index.htm (and other pages). there are a number of photos.   These photos are dropping down below the menu; they should be to the right of the menu.  This is only happening in smaller pads in landscape mode. I discovered this while testing in different mobile sizes.  The emulation is tablet 1024 x 768

    I am confused as to why smaller pads would cause this to happen.

    Thanks for any help.

    Peter

    Friday, August 25, 2017 6:10 PM
  • They drop below the floated side column when they can no longer fit beside it.  This would be expected. It starts happening well before you switch to the mobile menu.  As I said, examine your CSS and breakpoints.  You should switch to the mobile menu sooner, or resize the images smaller when the browser width gets smaller but you haven't switched to the mobile menu yet.

    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Friday, August 25, 2017 8:11 PM
  • Hi Kathleen...

    I understand what you are saying... 

    I am not sure how you "resize the images smaller when the browser width gets smaller."  Is this done in the code so that the images can be resized before it switiches to mobile?

    Peter

    Friday, August 25, 2017 11:01 PM
  • Do you understand what your current media query is doing? Use the same idea, with media CSS at a different breakpoint that changes the images CSS before they run out of space.  Or just change the breakpoint to switch to the mobile menu sooner.

    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Friday, August 25, 2017 11:07 PM
  • Hi Kathleen...

    The problem is that I don't really understand what the media query is doing.  I had someone add code to make the website responsive.  But the Media queries are sort of beyond me.   I have been trying to figure out what you are referring to...but I am sort of lost. 

    Is there a simple way to explain "just change the breakpoint?"

    I am not sure where it is.

    Thanks,

    Peter

    Thursday, August 31, 2017 3:29 AM
  • The breakpoint is where the media query kicks in, or out.  In your case, you have media query CSS that applies when the screen is max-width:1148px (at which, for example, .imag_framing width drops from 98% to 95%), and different CSS that kicks in when the screen is max-width 875px, notably #left_col becomes display:none and the #mobile-header becomes display:block (no longer display: none).   You can make the mobile menu kick in sooner by changing that value of 875px to a higher number, before the images shift over.  Or you can add another mobile query section with a max-width higher than 875 that changes the CSS styling of the images to make them smaller so they still fit until you reach 875 and the mobile menu.

    It is really no use to you to have someone change a site you are maintaining in ways you don't understand.  At the minimum google "media queries" and read up on what they are about.


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    • Marked as answer by Petersocal Wednesday, September 6, 2017 3:47 AM
    Thursday, August 31, 2017 4:34 PM
  • Hi Kathleen,

    Sigh...yes..  I agree, I SHOULD know how to deal with the media queries, but I am just fuzzy on it.  I am trying to figure it out...thanks for all your help.

    Peter


    • Edited by Petersocal Wednesday, September 6, 2017 3:47 AM
    Wednesday, September 6, 2017 3:45 AM