Jump to content

Font or block scaling and quick view quirks

Recommended Posts

Site URL: https://www,xocolab.fi

Hi,

I made our site anew and at the same time moved to 7.1. There's two issues i cant wrap my head around and limited in my skill set on this area.

First one is the scaling of fonts / blocks. I made the site on my big 4k display and it looked great. Then i checked it on my small laptop and text was overlapping each other, a mess. I had to compromise that it looks ok on small to medium screens but now theres wide gaps between headings and text on big displays. Just isn't nice looking. Any CSS for this fix? or something else im missing?

Second one is commerce quick view. Photos are on many occasions getting chopped in half (check pic). Whats causing this? Code i have at the moment is as follows (if any of those are causing the issue)

(.sqs-product-quick-view-content {background: white!important}
/* Quick view lighbox */
div.sqs-product-quick-view-content .ProductItem-details-checkout * {
    color: black !important;
}
/* Quickview lightbox content color */
.lightbox-inner .ProductItem .ProductItem-details * {
    color: black;
}
.sqs-product-quick-view-content .sqs-add-to-cart-button {background-color: #FFE5E5!important}

 

Thank's for the help!

example1.jpg

Edited by Xoco
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Are you referring to scaled text option from the text block itself? This option isn't what I would use to achieve large text in a specific area where you require better control. I'd suggest targeting the title and text elements independently and increasing the font size via CSS.

For your second issue -- Are these two separate images? Or is it a single image? My inclination is that if it's the ladder image type, you likely have set the a block in that section to have a background and it's acting like an overlay. If that makes sense.

Otherwise, I can't think of a reason why it's chopping your image into two separate images.

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.