Archived topic
Images complete at responsive version
6 replies · Started by Mj on May 23, 2017
Hello
I'm just starting with my first webs and I don't really understand how to identify the elements to modify the css code, so I would need some help with the responsive part of my web.
My website is http://www.agobarcelona.com
I would like to know what can I do so that in the tablet and mobile version the images not to be cut randomly. I want to see them entirely, as they look in the desktop version. Is it possible?
Thank you very much!
Hi there,
Your website seems to have a coming soon page on - can you turn it off so I can see the images?
Thanks!
Ups! Sorry, I thought I'd turned it off.
Now it's on http://www.agobarcelona.com
Thanks!
Unfortunately background images are not responsive by nature.
You could maybe try doing something like this to switch out the images at different devices.
@media (max-width: 768px) {
/* CSS in here for mobile only */
.elementor-20 .elementor-element.elementor-element-bhbepal {
background-image: url("URL HERE");
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
.elementor-20 .elementor-element.elementor-element-bhbepal {
background-image: url("URL HERE");
}
}Probably not the best way though Elementor support can probably help you out more since you are using it.
Sometimes changing the background-position to center center helps as well.
I believe it's already set to center center :)
Ah, then your method is the way to go :)
