@media css for resizing images

  • Resolved SaraLuisa

    (@saraluisa)


    4 years, 6 months ago

    Hi, I’m trying to have the background images fit the container height of small devices so you can see a bit more of the image.

    I had to insert the following css for the home page so the text that is over the image was legible. 

    @media screen and (max-width: 460px) {
    .page-header .container {
		padding-top: 30px !important;
		height:750px !important;
    }
	}

    I would like to add css so the images fill the height of container. At the moment you can only see a bit of the images as they are huge on small devices. If I lower the height in the above css it means the text on the homepage disappears.

    Any help would be much appreciated.

    Thanks

    • This topic was modified 4 years, 6 months ago by SaraLuisa.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    background-size: cover; (what you have now) is correct for having the background fill the container. The issue isn’t so much the image is huge, rather that small screens crop out most the width due to very different aspect ratios. Some height is cropped due to the container being taller than the screen. You might consider having a different background image for portrait aspects. Use a media query like @media only screen and (orientation: portrait) to specify a different background image.

    Thread Starter SaraLuisa

    (@saraluisa)

    Thank you @bcworkz for explaining, I understand better now. Is it possible to have a @media css so I can make the image fit the height of the container?

    Moderator bcworkz

    (@bcworkz)

    background-size: cover; should have done that. Instead of cover you could try one of these:
    contain
    auto 100%
    auto 100vh

    ETA: When you use @ character followed by code words, please demarcate with backticks or use the code button. @media without backticks actually emails a notification to forum member named “media” (don’t worry, they didn’t get it this time because of the email provider they use)

    • This reply was modified 4 years, 6 months ago by bcworkz.
    Thread Starter SaraLuisa

    (@saraluisa)

    Thank you @bcworkz for the css (cover and contain both worked for me). Also thank you for letting me know about @ and being careful how I write / use it.

    Thanks again

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘@media css for resizing images’ is closed to new replies.