Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I can't seem to get the image to function the way that I want it to.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #244923
    cyberpike
    Participant

    I’m trying to get this website to align centrally but when it collapses down to mobile size the image scales down still when the text goes underneath it, it think it’s being bumped because i have a 50% width on it but I cannot seem to figure out a way to not do that…… I’m wanting the image to scale with the sides of the page and not with the 50% whitespace on the side.

    Here is the codepen, please let me know if you have any questions!

    http://codepen.io/cyberpike/pen/PzabKY

    #244926
    Beverleyh
    Participant

    i think it’s being bumped because i have a 50% width on it but I cannot seem to figure out a way to not do that

    Correct, and the way to do it is with media queries. I don’t see them in your example so you should check them out in Google to learn more.

    With a media query in place, you can set a breakpoint where you can define different styles. I expect you’ll want to void the left float and 50% width on .posterimageleft. Also kill the float and current widths on the img within (although max-width:100%; should help with fluid scaling)

    #244927
    cyberpike
    Participant

    Is there a way to do this without media queries?

    #244929
    Beverleyh
    Participant

    Yes – with flexbox http://codepen.io/anon/pen/OXZGzv

    Don’t forget vendor prefixes http://shouldiprefix.com/#flexbox (you can also change the CSS settings in the pen)

    What’s the issue with media queries though?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.