NP3000 Posted September 20, 2022 Share Posted September 20, 2022 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
tuanphan Posted September 21, 2022 Share Posted September 21, 2022 Hi, Can you describe in more detail the problems? We can check easier NP3000 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
NP3000 Posted September 23, 2022 Author Share Posted September 23, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment