Images not responsive on mobile

Shapely
1

I can’t get the images on my homepage to fit the screen when viewed on mobile, any idea how I can make this work? I’ve tried various CSS additions but no success so far.

URL is thefoodwife.co.uk.

Jim

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Which images? can you share a screenshot?

Thanks!
Colorlib Support Team

3

Hi, here’s a screenshot from my android device. The other full-width images on the homepage also aren’t responsive.

4

Hi,

The parallax images won’t resize according to the screen size, normally background images won’t be responsive because of the size constraint, I will forward this issue to the development team, so that is there any way for making it responsive.

Let us know,

Thanks,
laranz.

5

I’ve got the following CSS on the site which I took from an old post on here. It helped to make the images a bit smaller but not small enough to fit on mobile screens. Is there any way of amending this (or using something else) that would resolve it? I tried changing the numbers in this (pixel size and percentages) but this didn’t help.

Jim

@media (max-width: 760px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
background: url(“http://www.thefoodwife.co.uk/wp-content/uploads/2018/03/TFW-BG-books-v5.png”) no-repeat #fff;
background-size: 100%;
height: 69vh;
}

#shapely_home_parallax-2 .parallax-window.fullscreen .align-transform{
top: 25%;
}
#shapely_home_parallax-2 .cover.fullscreen{
height: auto !important;
}
}

6

I’ve got the following CSS added to it which definitely helps, just doesn’t completely solve it. This was taken from an old post on this forum. Is there anything that can be done with this to sort it out?

@media (max-width: 760px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
background: url(“http://www.thefoodwife.co.uk/wp-content/uploads/2018/03/TFW-BG-books-v5.png”) no-repeat #fff;
background-size: 100%;
height: 69vh;
}

#shapely_home_parallax-2 .parallax-window.fullscreen .align-transform{
top: 25%;
}
#shapely_home_parallax-2 .cover.fullscreen{
height: auto !important;
}
}