Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 17, 2019 at 3:27 pm #1139135
    jannnnnneke

    Hi,

    I’ve created images which are changing when hovering. When I make screen smaller the image is wider than the column. Is there a way to make de image responsive? I can make image width and height smaller when screen is 1000px wide for example, but than I have to do that for every px. Is it possible to make the image stretch column but not go over the column width?

    This is CSS code im using:

    #maarten {
background-image: url('link image 1');
height: 334px;
width: 334px;
background-size: cover;
}

#maarten:hover {
background-image: url('link image 2');
}

    Thanks a lot!

    September 18, 2019 at 3:29 pm #1139524
    Rikard

    Hey jannnnnneke,

    You could try something like this:

    #maarten {
background-image: url('link image 1');
height: auto;
width: 100%;
background-size: cover;
}

    If you want to target smaller screens then you can place it inside of a media query:

    @media only screen and (max-width: 767px) {
  your code goes here
}

    Best regards,
    Rikard

    September 18, 2019 at 10:26 pm #1139729
    jannnnnneke

    Hi!

    Now I have:

    #maarten {
background-image: url('image link');
height: auto;
width: 100%;
background-size: cover;
}

#maarten:hover {
background-image: url('image link');
}

    But the image is totally gone now. Any idea why? See website in private data!

    Thanks!

    September 22, 2019 at 6:33 am #1140559
    Rikard

    Hi,

    You have two elements with the same ID on that page, try to fix that first please.

    Best regards,
    Rikard

    March 11, 2020 at 5:17 pm #1192367
    jannnnnneke

    Hi! Sorry for the late reply but now working on this again. I got two ID’s with the same name because one element is not visible at small screens and the other not on big screens. Is that a problem when it’s the same element? Now changed the ID and tried your css code but the image is gone again.

    Any ideas? See website.

    March 12, 2020 at 5:20 am #1192487
    Rikard

    Hi,

    I see that you have changed the ID for mobile now, and the background is showing fine on my end. Did you manage to get it working?

    Best regards,
    Rikard

    March 12, 2020 at 8:58 am #1192518
    jannnnnneke

    Hi! The background is working, but that has been working all the time. The only thing thats not working is background-size: cover. When you make the internet browser on desktop smaller you see that sometimes the image is bigger than the column. Now i’ve changed the size for some different screen sizes but it should be on every screen 100% with of the column.

    You understand me now?

    And another question: what css code can i use to make the picture a little bit fade into the other?

    Thanks a lot! Janneke

    March 12, 2020 at 1:46 pm #1192593
    Rikard

    Hi,

    I think that is happening because you have specified a width for the div, setting it to auto would likely help:

    #maarten {
    background-image: url(your-image.jpg);
    height: 334px;
    width: auto;
    background-size: cover;
}

    Best regards,
    Rikard

    • This reply was modified 4 years, 9 months ago by Rikard.
    March 30, 2020 at 3:48 pm #1199092
    jannnnnneke

    Yes! That’s working, but now I would like to center the image and make him fit the column if you understand what I mean. When I make the browser smaller the image is not totally visible anymore and when the layout changes to 1 column the image is too small for the whole column.

    Hope you understand me. Open the link in your browser and then make the screen smaller. The image of Maarten (the first one) is the only one i’ve changed for now.

    Thanks a lot!

    April 6, 2020 at 3:25 pm #1201248
    Victoria

    Hi jannnnnneke,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#maarten-mobiel, #karin {
    margin: 0 auto;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.