Floated Elements: Different Max-Widths on Different Screens

  • Resolved nateonawalk

    (@natesirrah)


    9 years, 11 months ago

    The main functionality of my site (https://kawaiiface.net) is stringent upon floats and max-widths working well. My sidebar slots are float: left; and float: right; , and my content buttons are float: center;. Everything positions itself in relation to one another responsively on desktop screen sizes — but on mobile, the sidebars appear above the content.

    In anticipation of the algo update, I’ve gone ahead and added responsive containers to everything: my sidebars run a max-width: 160px; with width: 100%; to 1. keep them in the spot they should be and 2. allow them to be responsive on smaller screens. This has caused an issue, though — where the max-width allows my containers to fit well and provide a proper UE on desktop, they prevent the slots from expanding enough to fill the whole screen on mobile!

    How can I remove my max-width parameter when my left-floated element is in its own block (aka above everything else on smaller screens)? Here is an image to help.

    Thanks so much!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter nateonawalk

    (@natesirrah)

    Hurr-durr, my sleep deprivation is showing; float: center; meaning margins: auto;.

    Thanks for anyone who can help!

    Thread Starter nateonawalk

    (@natesirrah)

    UPDATE: I was able to resolve this with help from SO, I found the breakpoint where things no longer floated correctly, and they used an @media parameter to redefine the slots as 100% only within that parameter. Things seem to be functioning more correctly now!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Floated Elements: Different Max-Widths on Different Screens’ is closed to new replies.