Jump to content

How do you fix 7.1 Desktop Banners being cropped by 80% on mobile?

Recommended Posts

Site URL: http://www.coachhenrylam.com

My full size banner images are cropped by like 80% on 7.1 mobile. How do I fix it?

I tried this 7.1 code but  it didn't work

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/

/* Insert Code for Mobile Above This Line */
}

Resizing Image Blocks Site-Wide

.sqs-block-image {
  width: 80%;
  margin: 0 auto;
}
Link to comment
  • Replies 1
  • Views 324
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi,

You mean top banner image? Add to Design > Custom CSS

/* homepage-mobile-top banner resize image */
@media screen and (max-width:767px) {
[data-section-id="621eb6267560ae5497545eb4"] {
    min-height: unset !important;
    height: 90vh;
}}

 

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.