Font or block scaling and quick view quirks

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!

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.