Background responsive only to height (and not to the width) of mobile devices

Shapely
1

Hello,

I need some help with the responsiveness of the background images on Shapely - Parallax Section For Frontpage. I’ve added to the custom CSS the following code:

@media (max-width: 760px){
#shapely_home_parallax-2 .parallax-window.fullscreen {
    background: url("https://block15.aueb.gr/wp-content/uploads/2020/06/logo-3.jpg") 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;
}
}

which makes the background image responsive to the height of mobile devices. How can I make it responsive also to the width?

Thanks,
VD

2

Hey there

“which makes the background image responsive to the height of mobile devices. How can I make it responsive also to the width?” - Sorry, not clearly understand this part, can you please add little bit more details? also, please provide a link to the page

3

When the mobile is turned to landscape view, the image is responsive, it fits perfectly. When the mobile is in normal /vertical view, the image does not respond in width.

4

Can’t attach the URL, I’m getting an error “Forbidden. Message seems to be spam”.
The site is in draft mode, on the URL you can see on my CSS above, keep the part until dot gr/ and then replace the rest with:
?customize_changeset_uuid=f503898d-150c-47d7-88e0-220c6fbda024
(see also the attached image)

Thanks,
VD

5

Hi

Ok, i understand your problem is “When the mobile is in normal /vertical view, the image does not respond in width.” - yes, but there is no other way to change this behavior, no option here, we have the same on our demo.
By the way, why this image is not responsive? it’s clearly visible on smartphone on tablet and on desktop, yes, some parts become invisible on small screen devices but there is nothing wrong with it :slight_smile: