Screen responsiveness

[Daniel19901]

Hi everyone,

Hope someone can help!
For some reason our customer sees a very wide screen and everything is tiny, although he is using 1920 * 1080.  What is wrong ? - I asked him to set his screen on 100% (no zoom), but it still looks like this.

When I checked the display settings of my device (Windows / Lenovo) it was 1920* 1080 and the website looks good when I go to the browser- but he sees it way more broad. ONLY When I check the responsiveness of the page (inspect) and use 1920 * 1080 as size I get the same issue that he gets (everything is way too broad and small)

I didn't change the theme settings, so I don't know what's wrong, everything should have been looking normal

Store: https://aaba5d-52.myshopify.com/
Hope you can help

How he sees it:

How I see it:

[Huptech-Web]

Hello @Daniel19901, The appearance will remain the same only when it is viewed in inspected mode in the browser.
Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[Sweans]

Hi @Daniel19901 ,

I think the website was designed with a 1440px screen width, but the customer's device has a 1920px screen width. Since the container width is fixed at 1170px for both screen sizes, everything appears small and broad on the customer's screen. To resolve this, we need to adjust the design to be more responsive and adapt better to larger screen sizes.

If you need further assistance, feel free to reach out!

I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[Daniel19901]

Hi @Sweans thank you very much for that! How can adjust the design ?

[Sweans · Accepted solution]

Hi @Daniel19901 ,

To adjust the design for larger screen sizes and make it more responsive, you can modify the container width and increase the font size.

please follow the steps below:

1.Go to your Shopify Admin.
2.Navigate to Online Store > Themes.
3.Find the theme you're using and click Actions > Edit code.
4.In the left sidebar, under the layout directory, click t4s-content-position.css

paste the code and save

.t4s-content-position.t4s-container {
width: 90% !important; /* Adjust the width as necessary */
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans