Jump to content

Desktop breakpoints and larger screen display issues

Recommended Posts

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. 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

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%;
      }
    }
 

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.