Hallo, i have set up a staging site at https://jittysamsterdam.com
The background images of the first row will not shown after a pro upgrade. There is a media query for this. First of all let me ask is it still the best way for a speedy website to work with media queries like this or can I might as well use the breakpoints in pro to set up different background images?
Since this issue exist on many pages I have decided to downgrade my original site to a previous PRO version and trying to figure out the issue on this staging domain. I am open for options, I think I have like 20 pages with this issue.
This is my element CSS
$el.x-section{
padding-top: 175px;
padding-bottom: 130px;
background-color: #000;
}
$el .x-bg{
background: url(/wp-content/uploads/Goede-kapper-Amsterdam-1925-5.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: 60px;
height: calc(100% - 60px);
}
@media only screen and (max-width:1199px){
$el.x-section{
padding-top: 120px;
padding-bottom: 100px;
}
$el .x-bg{
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(/wp-content/uploads/Goede-kapper-Amsterdam-1199-2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
@media only screen and (max-width:979px){
$el.x-section{
padding-top: 100px;
padding-bottom: 80px;
}
$el .x-bg{
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(/wp-content/uploads/Goede-kapper-Amsterdam-979-2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
@media only screen and (max-width:767px){
$el.x-section{
padding-top: 100px;
padding-bottom: 50px;
}
$el .x-bg{
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(/wp-content/uploads/Goede-kapper-Amsterdam-767-2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
top: 0px;
height: 100%;
}
}
@media only screen and (max-width:480-2px){
$el.x-section{
padding-top: 100px;
padding-bottom: 10px;
}
$el .x-bg{
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45) ), url(/wp-content/uploads/Goede-kapper-Amsterdam-480.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
