Jump to content

Image size and padding in mobile

Recommended Posts

Site URL: https://www.medizen.es/

Hi!

I need to make smaller the 3 images on the 'Beneficios_home' page of the Home menu for mobile devices.
I tried this CSS but there is a lot of space in the image, very far from the text and off-center:

@media screen and (max-width:640px) {
  div#block-7a7e47bdae5ddd29adf7 img {
    width: 50% !important;
    height: auto !important;
    transform: translateX(-50%);
    left: 50% !important;
}
}

Could you please help me?

Thanks in advance,
Ana

website: www.medizen.es

Pwd (lock page): Medizentecuida

 

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

try include this code to your media query code

div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper {
    padding-bottom: 50% !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks for answering so fast 🙂

I see the right correction in the PC (mobile view), however in the phone the position is no corrected: the image appears cut off and far from the text below.

 

1613846349_WhatsAppImage2020-04-12at11_41_11.thumb.jpeg.4e8fd6488860fcdeaef216f270a070d9.jpeg

 

What can I do?

Thanks

 

Link to comment

I think maybe I have a solution:

 

<style>
@media screen and (max-width:640px) {
  div#block-7a7e47bdae5ddd29adf7 img {
    width: 50% !important;
    height: auto !important;
    transform: translateX(-50%);
     transform: translateY(50%);
          left: 25% !important;
}
div#block-7a7e47bdae5ddd29adf7 .image-block-wrapper {
    padding-bottom: 50% !important;
}
  
  }
</style>

 

is that correct? (i have no idea of css.. it's only test and error...)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.