Desktop breakpoints and larger screen display issues

Hi, I need help with making sure the site I'm designing looks good on all screens.

The site is 90% complete. However, its not displaying correctly at larger screen sizes. I've tried to find the correct css code to allow the site to display properly but I cant find it. 

I'm not sure if the code that I've already added to address buttons squashing at various screen sizes is conflicting with the whole sites ability to display properly or if its how the site has been designed. 

Any help would be greatly appreciated. I need to launch the site on Thursday. 

As its a private client I cant display the url but I can supply it to whoever thinks they can definitely help. 

Hi,

Can you describe in more detail the problems? We can check easier

Thanks for you reply Tuanphan.

I will email you with the link to the site. 

Essentially, when I expanded my browser to the full size of my 27.5" screen, the design expanded proportionately up until about 2/3's of the width and then all the text sizes and formatting went out. 

Is it because of the site spacing? The Page Width is set to 1920px and Site margin is 10vw

I'm also having a nightmare with the button sizes at various screen sizes. The code I've added for that is at the bottom of the page.

The formatting for mobile is looking messed up too. 

A friend added the below CSS code to each of the screen sizes which has worked but is effecting other parts of the site:  

@media screen and (min-width: 2304px)
{ h1 {
    font-size: calc(6.5 * 1rem) !important;
  }}

// // // // // // // // // // // 
@media screen and (min-width: 2304px)
{ h2 {
    font-size: calc (5.4 * 1rem) 
!important;
  }}
// // // // // // // // // // // 
This code is effecting the titles in the Carousel testimonials section - I cant figure out how to change it. 
The carousel titles aren't editable in the site styles.
When I Inspect it, the HTML says that the carousels titles are set to H2. In the editor the text is 1.2px
I dont know CSS well enough to edit the above code to exclude either the section id or the Testimonials Carousel. 

@media screen and (min-width: 2304px)
{ h3 {
    font-size: calc(2.6 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ h4 {
    font-size: calc(1.8 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ .sqsrte-large {
    font-size: calc(1.4 * 1rem) !important;
  }}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-simple[data-title-font-unit="rem"] .list-item-content__title {
    font-size: calc(1.4 * 1rem) !important;
}}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-simple[data-description-font-unit="rem"] .list-item-content__description {
    font-size: calc(1.3 * 1rem) !important;
}}

@media screen and (min-width: 2304px)
{ #siteWrapper .user-items-list-item-container.user-items-list-banner-slideshow[data-title-font-unit="rem"] .list-item-content__title {
    font-size: calc(2.2 * 1rem) !important;
}}

@media screen and (min-width: 0) and (max-width: calc(2303px)) and (orientation: landscape){
.user-items-list .list-section-title {
    font-size: calc(5.4 * 1rem) !important;
}}
  
  @media screen and (min-width: 2304px){
.user-items-list .list-section-title {
    font-size: calc(5.4 * 1rem) !important;
  }}

/ / / / / / / / / / / / / / / /
Buttons code

//Mobile + Tablet Buttons
@media only screen and (min-width:719px) (max-width:1023px)
 { .sqs-block-button-element {
   font-size: 8px !Important;
   padding: 0.9rem 0 !important;
        min-width: 90%;
        width: 90%;
      }
    }

//TABLET BUTTONS
@media screen and (min-width:1024px) (max-width:1280px) 
{.sqs-block-button-element {
    font-size: 6px !Important;
   padding: 0.9rem 0 !important;
        min-width: 90%;
       width: 90%;
}
}

//Desktop Buttons
@media only screen and (min-width:1281px) (max-width:2881px)
 { .sqs-block-button-element {
   padding: 1rem 0 !important;
        min-width: 80%;
        width: 80%;
      }
    }
 

Hi @tuanphan! I'm also having an issue with this on my website. On very large monitors the homepage tagline slides in beneath the main video. I have some code in place to display the video at 16:9. Is there some way to anchor the tagline in place relative to the video? Or is there a way to set a maximum view size for the website? See attached reference images. You'll see the line "content production, fuelled by resourceful creativity" disappears under the video when viewed on a large monitor. 

Many thanks in advance!

On 5/11/2023 at 9:58 PM, ScoutMedia said:

Hi @tuanphan! I'm also having an issue with this on my website. On very large monitors the homepage tagline slides in beneath the main video. I have some code in place to display the video at 16:9. Is there some way to anchor the tagline in place relative to the video? Or is there a way to set a maximum view size for the website? See attached reference images. You'll see the line "content production, fuelled by resourceful creativity" disappears under the video when viewed on a large monitor. 

Many thanks in advance!

What is site url?

URL is: https://mandarin-poodle-dg32.squarespace.com/

PW: website

Many thanks!

Hi @tuanphan - were you able to access my website?

Many thanks,

Maja

On 5/15/2023 at 10:28 PM, ScoutMedia said:

URL is: https://mandarin-poodle-dg32.squarespace.com/

PW: website

 

Many thanks!

We can use CSS to move text under video. Which screen size do you have problems? I tried some but all look fine

Hi @tuanphan - we have issues with monitors larger than 27"

Many thanks,

Maja

On 5/22/2023 at 8:32 PM, ScoutMedia said:

Hi @tuanphan - we have issues with monitors larger than 27"

Many thanks,

 

Maja

Add to Design > Custom CSS

@media screen and (min-width:1900px) {
.fe-block-872039ec0625393d893b {
    position: relative;
    top: 50px;
}
}

Thanks! That fixed it!