Jump to content

Help to fit background image on mobile-tablet

Recommended Posts

Site URL: https://www.entropiacaffe.it/

I have been trying to resize 'background-images' on Home-page (not other pages because i would like to make change only on homepage) on mobile/tablet in 7.1. 

As you can see from my attached files, the image is not properly fit on mobile and tablet. 
I would like to shrink my background image, to fits in. 

Is here anyone can help me? I tried to copy and paste some css codes from around, but still i didnt find nothing works properly.

My url is 
https://www.entropiacaffe.it/

That is my css code under>design>custom css if can help you in some way. 

This code at moment I do not want to change because is working properly for what i would like as final result.

/* 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*/
.sqs-block-image {
width: 90%;
margin: 0 auto;
}
 .sqs-block-product {
width: 70%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}
h3 {
    color: #ad9961 !important;
}
h4 {
    color: #ad9961 !important;
}

/* related product 4 items */
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) {
    display: none;
}

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 50%;
}
}

1 - That is how my image appear on desktop and i would like that  appear on mobile and tablet.  The compromise can be to adapt the word and button (make it bigger and readable)

1511037499_1-Desktop.thumb.png.6e9811be2e85d6952f7de34213c1a01b.png
2- That is how appear on tablet. The image sides are cut.1724759666_2aTablet.png.2e767674db89b54b9149187025cf4864.png

3- That is how appear on mobile. Side cut it an in this case even the quality of image  looks lower678651753_3Mobile.thumb.png.d1c3bda9e998330acb55205518a68473.png

 

Thanks in any case

Benito

 

Edited by Benito
404 url
Link to comment
11 hours ago, Benito said:

Site URL: https://www.entropiacaffe.it/

I have been trying to resize 'background-images' on Home-page (not other pages because i would like to make change only on homepage) on mobile/tablet in 7.1. 

As you can see from my attached files, the image is not properly fit on mobile and tablet. 
I would like to shrink my background image, to fits in. 

Is here anyone can help me? I tried to copy and paste some css codes from around, but still i didnt find nothing works properly.

My url is 
https://www.entropiacaffe.it/

That is my css code under>design>custom css if can help you in some way. 

This code at moment I do not want to change because is working properly for what i would like as final result.

/* 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*/
.sqs-block-image {
width: 90%;
margin: 0 auto;
}
 .sqs-block-product {
width: 70%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}
h3 {
    color: #ad9961 !important;
}
h4 {
    color: #ad9961 !important;
}

/* related product 4 items */
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) {
    display: none;
}

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 50%;
}
}

1 - That is how my image appear on desktop and i would like that  appear on mobile and tablet.  The compromise can be to adapt the word and button (make it bigger and readable)

1511037499_1-Desktop.thumb.png.6e9811be2e85d6952f7de34213c1a01b.png
2- That is how appear on tablet. The image sides are cut.1724759666_2aTablet.png.2e767674db89b54b9149187025cf4864.png

3- That is how appear on mobile. Side cut it an in this case even the quality of image  looks lower678651753_3Mobile.thumb.png.d1c3bda9e998330acb55205518a68473.png

 

Thanks in any case

Benito

 

I think you should design new image for smaller screen and use media breakpoint css to replace the background on mobile

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.