Jump to content

Need help with width of banner on mobile!

Recommended Posts

Site URL: https://www.laswellpreneurs.com/workout-1-social-cleanse

The banner on my website looks like this (on laptop)

1320687843_ScreenShot2021-10-27at10_56_35AM.thumb.png.9f98cc20cea7cc3d6f67a2b0db8806c8.png

But when I'm looking at it on the mobile it's looking like this:

781264301_ScreenShot2021-10-27at10_57_42AM.thumb.png.8e94473b6f608ebc02b8559b6d49053c.png

 

I've tried many code options I'm looking in this forum and none work. I'm able to change the height, but it's not the height I need to change, it's the width.

 

Last time I tried I did it like this, but nothing happened:

 

@media screen and (max-width:767px)  {

#contenido-como-medicina-workout .image-block-wrapper img {
    max-width: 50%!important;
    height: auto !important;
}

}

Link to comment
  • Replies 2
  • Views 184
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

For this particular case, the best that you can do is change the focal point to a different part of the image on mobile. With parallax turned on, the image gets moved to a different container that is not part of that section. So there isn't really a good way to target the image differently. 

one thing you could do is just make the section background color solid pink on mobile:

@media screen and (max-width:767px)  {
#contenido-como-medicina-workout{
    background: pink;
 }
}

You can of course replace pink with your hex code.

Link to comment
On 10/27/2021 at 11:59 PM, PiaLopez53 said:

Site URL: https://www.laswellpreneurs.com/workout-1-social-cleanse

The banner on my website looks like this (on laptop)

1320687843_ScreenShot2021-10-27at10_56_35AM.thumb.png.9f98cc20cea7cc3d6f67a2b0db8806c8.png

But when I'm looking at it on the mobile it's looking like this:

781264301_ScreenShot2021-10-27at10_57_42AM.thumb.png.8e94473b6f608ebc02b8559b6d49053c.png

 

I've tried many code options I'm looking in this forum and none work. I'm able to change the height, but it's not the height I need to change, it's the width.

 

Last time I tried I did it like this, but nothing happened:

 

@media screen and (max-width:767px)  {

#contenido-como-medicina-workout .image-block-wrapper img {
    max-width: 50%!important;
    height: auto !important;
}

}

Add this to Design > Custom CSS

/* Workout 1 Social Cleanse Mobile image */
@media screen and (max-width:640px) {
body#collection-617973ffa32ada55e67e5a1e .Parallax-item:first-child img {
    left: 0 !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.