Jump to content

Using different banner image for mobile

Recommended Posts

  • Susana_SQSP changed the title to Using different banner image for mobile
  • Replies 5
  • Views 680
  • Created
  • Last Reply
20 hours ago, MeaghanPM said:

Site URL: https://www.promomomma.com/

Hello,

The banner image I am using on the home page of my website looks great on desktop view, but doesn't translate to mobile. Is there a way to use a different banner image on my mobile site?

It looks like you solved? Do you want to solve banner on tablet?

image.thumb.png.b9b39d6b061e548ca8363442d8e27997.png

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

and some other. Do you want to fix these?

Site URL – https://www.promomomma.com/

1. (Tablet-Footer) Make these text one line?

promomomma.com-01-min.png

2. (Tablet-Homepage) Make fields same line?

promomomma.com-02-min.png

3. (Tablet-Homepage) Resize banner?

promomomma.com-03-min.png

4. (Mobile-Footer) Increase footer width?

promomomma.com-04-min.png

5. (Mobile-About) resize slide?

promomomma.com-05-min.png

6. (Tablet-About) resize slide?

promomomma.com-06-min.png

7. (Tablet-Contact) Want to stacked text/form?

promomomma.com-07-min.png

8. (Mobile-Contact) Want to resize form?

promomomma.com-08-min.png

9. (Mobile-Products) Want to add breadcrumbe or back to shop button on top of product?

promomomma.com-09-min.png

10. (Mobile-Products) Want to add an arrow slide, instead of 1/8

promomomma.com-10-min.png

11. (Mobile-Products) When added product to cart, I don’t see Cart icon appear. Do you want to add a link/button “Go to cart”?

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
On 5/3/2021 at 2:11 AM, MeaghanPM said:

Yes to everything, please - if you don't mind!

Q1. Add to Design > Custom CSS

/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
footer.sections .content-wrapper {
    padding-left: 0 !important;
}
footer.sections .content {
    width: 95% !important;
}
footer.sections .content * {
    white-space: nowrap;
}
footer.sections .content .sqs-block {
    padding-left: 5px;
    padding-right: 5px !important;
}
}

Other questions. Next comment

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
On 5/3/2021 at 2:11 AM, MeaghanPM said:

Yes to everything, please - if you don't mind!

Q2. Q3. Add to Design > Custom CSS

/* tablet-newsletter */
@media screen and (max-width:991px) and (min-width:768px) {
.newsletter-block .newsletter-form-field-wrapper {
    min-width: unset !important;
}
body.homepage article section:first-child {
    min-height: unset !important;
    height: 30vh;
    margin-top: 5vh;
}
}

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.