Images not responsive on mobile

0grifi2015 · April 2019

Hi,

my header background images are not responsive and the portfolio images are too big (imho). How can I fix this these problems?

https://lpg.jls.mybluehost.me/

Pablo · April 2019

Hi,

It's because you have turned on the "Parallax" effect, it's not gonna 'scale', but it will stay in the center (like cutting).

Also, you assigned very big padding value, that's why it's long on mobile.

http://prntscr.com/ne3v7n

If you want to use background video (as in yours, the picture is changing), you should use the Revolution Slider instead.

It's easy to use and it has a lot of advanced options which will make your header background beautifully.

Thanks

0grifi2015 · April 2019

Thank you, I changed the Parallax to Center, but if I take off padding, my header image becomes very small in height. It should be 400 or 500px of height, is there an other way to set this?

Lets use this page as example: https://lpg.jls.mybluehost.me/celeste-project/

And how can I make the portfolio pictures smaller on mobile? https://lpg.jls.mybluehost.me/products/

Pablo · April 2019

1) You can create separate section for mobile and desktop.

It's in the section settings, exactly it's a "Responsive Visibility"

http://prntscr.com/ne4z75

2) You can make it smaller only globally, but try this code if you want to change it on mobile only.

Paste it to the Theme Options > Custom CSS & JS > CSS


@media (max-width:768px){
  .portfolio-item{
    transform:scale(0.8) !important;
  }
}

Thanks

0grifi2015 · April 2019

1) Thank you, this works.

2) Thank you, with this code the images resize, but there is a lot of space between them. I guess the container can't resize, right?

Pablo · April 2019

It shouldn't be touched by CSS to be honest, because it's all calculated using Javascript.

Unfortunately, the height of the container is clearly managed by that script and even changing it with CSS will not change it.

Greetings

Images not responsive on mobile

Comments