problem with the responsive

Rodman38.

Page seems responsive and that leads me to believe you’ve found a responsive setting fix. However, you can further improve visuals by modifying the following CSS property (as per Element inspect):

@media (max-width: 767px)
post-240.css?ver=1511021567:1
.elementor-240 .elementor-element.elementor-element-yj8dq0l > .elementor-container {
min-height: 133px;
}

you need to change the following: “min-height: 133px;” to “min-height: 250px;” (This is because your background image is not showing as it should in devices meeting the “@media width” property criteria.

your code does not work, I have errors, why use this code ?

 post-240.css?ver=1511021567:1
.elementor-240 .elementor-element.elementor-element-yj8dq0l > .elementor-container {

it’s normal to have errors with this type of code.

Yes I change the section with the cover image (set to “center center”) and then I decreased the section height of the section.

I am not good with the css code, but I found and applied the following css code:

/* Réglage responsive */
@media (min-width:768px) and (max-width:950px) { 
selector .elementor-row { 
flex-wrap: wrap; }
selector .elementor-column {
width: 50%; } 
}

@media (max-width: 900px) { 
	selector .elementor-col-33  {
	    width: 50%;
	}
}

@media (max-width: 500px) { 
	selector .elementor-col-33 {
	    width: 100%;
	}
}

/*MD Tablet, ipad landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/*SM Tablet, ipad portrait*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/*XS Mobile portrai*/
@media only screen and (max-width: 767px) {
}

/*XSL Mobile landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

• This reply was modified 7 years ago by rodman38.

You should have been able to do all of this without any custom css. Elementor sections already provide a min-height setting that can be defined for desktop, tablet and mobile.

The background-size “cover” declaration tells the browser to always make sure the image will cover the entire container “without” changing the aspect ratio. This inherently will cut things off because it chooses to “stretch” the image left/right or top/bottom and never reveal white-space which results in parts of the image being masked out of the container if the aspect ratio differs from the image dimensions.

The “contain” property will always make sure the entire image is visible both width and height but also allows gaps left/right or top/bottom to achieve this.

See this article for a good read – https://css-tricks.com/almanac/properties/b/background-size/