Responsiveness of your Background Images

Background images in responsive themes are a hot topic in web design. There are plenty of solutions to make background pictures adapt to different screen sizes perfectly, yet there is no definitive solution.

Vertoh center aligns your images on smaller screens and this tends to work for most pictures. If you are working with a picture with distinct elements on the edges, you will encounter some visualization problems.

Here are a couple of solutions to make your picture work best with Vertoh

HEADER

This fix will only apply to the header part when there is a slider in place. It won’t affect the images behind the calls to action.

Also bear in mind that this fix will cut the subtitle of your website/event from the iPhone view. This cannot be reinstated if you apply the fix.

This fix only works with versions 1.3.28 onwards

a. Without using child theme:
in vertoh theme folder
– backup css/fix.css
– open css/fix.css
– insert the fix code at the end of the file ->

/* fullwidth images responsive fix */

.type-slider #main-slider .item{
height: auto;
padding-bottom: 43%;
}
.type-slider .container.relative{
position: absolute !important;
top: 0;
left: 0;
right: 0;
padding-bottom: 43% ;
}
.type-slider .absolute.slider-content{
height: 356px;
margin-top: -179px !important;
top: 50% !important;
}
.type-slider .fullwidth.site-slider{
min-height: 0 !important;
}
.type-slider header.header.transparent .site-logo a{
margin-left: 38px;
}
.type-slider header.header.transparent.shrink .site-logo a{
margin-left: 0 !important;
}
@media only screen and (max-width: 1200px){
.type-slider section.fullwidth.site-slider .slider-content h1 {
font-size: 50px;
}
.type-slider section.fullwidth.site-slider .section-button{
margin-top: 34px;
}
}
@media only screen and (max-width: 1024px){

.type-slider section.fullwidth.site-slider .slider-content h1{
font-size: 33px;
}
.type-slider section.fullwidth.site-slider .slider-content p{
font-size: 14px;
}
.type-slider section.fullwidth.site-slider .slider-content hr {
margin: 10px auto;
}
.type-slider section.fullwidth.site-slider .section-button{
margin-top: 24px;
}
.type-slider .absolute.slider-content{
height: auto !important;
top: 58px !important;
margin-top: 0 !important;
}
.type-slider section.fullwidth.site-slider .section-button {
padding: 10px 23px;
margin-top: 24px;
min-width: 0;
}
.type-slider section.fullwidth.site-slider .slider-content h3{
font-size: 17px;
}

}

@media only screen and (max-width: 768px){

.type-slider section.fullwidth.site-slider .slider-content h1{
font-size: 14px;
margin-bottom: 8px;
}
.type-slider section.fullwidth.site-slider .slider-content p{
display: none;
}
.type-slider section.fullwidth.site-slider .slider-content hr{
display: none;
}
.type-slider section.fullwidth.site-slider .slider-content h3{
display: none;
}
.type-slider section.fullwidth.site-slider .section-button{
margin-top: 0;
}
.type-slider section.fullwidth.site-slider .section-button{
min-width: 0 !important;
padding: 5px 10px !important;
}
.type-slider section.fullwidth.site-slider .slide-down i{
display: none;
}
.type-slider section.fullwidth{
padding: 0 !important;
}
}

/* ——- */

– save css/fix.css

b. Using child theme:
in vertoh-child theme folder
– open style.css
– insert the fix code at the end of the file ->

/* fullwidth images responsive fix */

}

@media only screen and (max-width: 768px){

/* ——- */

– save style.css

CALL TO ACTION PARALLAX IMAGE in HOME PAGE

The only way to have exactly the image you want for the iPhone resolution is to specify another picture just for iPhone resolution.

You will need to upload the picture to your wordpress site and have the link handy.

a. Without using child theme:
in vertoh theme folder
– backup css/fix.css
– open css/fix.css
– insert the fix code at the end of the file;

@media only screen and (max-width : 480px) {
section#tile_calltoaction.fullwidth.parallax{
background-image: url(#insertheretheimageurl) !important;
}
}

– complete the code with the new image url;
– save css/fix.css

b. Using child theme:
in vertoh-child theme folder
– open style.css
– insert the fix code at the end of the file;

@media only screen and (max-width : 480px) {
section#tile_calltoaction.fullwidth.parallax{
background-image: url(#insertheretheimageurl) !important;
}
}

– complete the code with the new image url;
– save style.css

Was this article helpful to you? Yes No