Hey there, at first it wasn’t responsive. I found the code below and it becames responsive, I thought it would be more like the image below it. What do I need to add to the code to make it more like the image below it?
@media only screen and (max-width: 759px){
.template-index .background-size-cover{
background-size: contain;
background-position: center center;
max-height: 100%;
max-width: 100%;
background-repeat: no-repeat;
}
}
@charliesvibe Can you please send me your store url?
add this or try to use different image for mobile which should have more height then width
@media only screen and (max-width: 759px)
{
.template-index .background-size-cover {
background-size: cover;
background-position: center left;
max-height: 100%;
max-width: 100%;
background-repeat: no-repeat;
}
}
or use below code to move image
background-position: center center;
Thank you so much. I really appreciate it. it did help the situation but if there a way to fit the whole picture into that space. if you go on www.neweracap.com and look at desktop and mobile. you’ll see that the whole was fits in to the mobile app and not just the left section. how to do that?
Ok now it did work on the mobile but when I went back to the computer, it didn’t have any images showing on the site. I need it to work on the desktop and mobile simultaneously.
hy there neweracap.com are using different images for mobile and desktop view they have 2 different images
its working i checked on your website. copy this code and paste at the end of theme.css
@media only screen and (max-width: 759px){
.template-index .background-size-cover {
background-size: cover;
background-position: center left;
max-height: 100%;
max-width: 100%;
background-repeat: no-repeat;
}
}
Thank you . Yes to do work. What would make the image fit in to the mobile device like this? not just the left side.
they are using 2 different images for mobile they have a different image
the image i shared you will see 2 images one is for desktop and one is for mobile
