Images not responsive on mobile

Comments

• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next