Webshop poorly optimized on iPad and widescreen displays

[User026]

Hi guys, I’ve noticed that our webshop is very poorly optimized on iPad and widescreen displays. How could I fix this?

Ipad:

Widescreen:

[PaulNewton]

Hi @User026 I’m @PaulNewton shopify-partner with a range of merchant solutions.
Adding new breakpoints is an advanced theme customization for some themes to do properly for every section or group of elements.

If this is problem for your customers and you have an actual budget you can reach out to me for customization services.
To connect CLICK my profile-pic, @PaulNewton, or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

[tim_1]

What happens is that on “iPad pro”-sized screen your top menu wraps into 2 rows.
The code, which overlays your header over first hero section is hard-coded for single-line menu.

Default Dawn header has a CSS variable to store the header height, for this one we’d need an extra media query.

You have this CSS rule:

 #shopify-section-template--24039743258948__ss_hero_16_fg3hjB .section-template--24039743258948__ss_hero_16_fg3hjB {margin-top: -70px;} 

It’s hard to tell whether this was generated by SS section code, or added to “Custom CSS” as

.section-template--24039743258948__ss_hero_16_fg3hjB {
  margin-top: -70px;
}

As a quick fix to your problem you may add this to the hero section “Custom CSS” setting (adding it elsewhere would require !important):

@media (min-width:1024px) and (max-width:1205px) {
  .hero-template--24039743258948__ss_hero_16_fg3hjB {
    margin-top: -100px;
  }
}

This is not the best option though.
The code works on my desktop for current fonts and current menu items – adding more menu items or even changing wording may make it no longer work.
Ideally a small JS is needed to monitor actual header height (like original Dawn header does).

[User026]

Hi Tim,

Thank you for your response. I’ve applied it and it works on the homepage. However, each header has different code, which means I have to do it manually every time. Is there a solution for this?

Additionally, on the signup page the entire page is poorly optimized. The page is not fully full-width and you can scroll horizontally. The signup options are aligned to the right, as well as other sections. Do you have any idea how I can optimize this better for iPad?

[PaulNewton]

Not all code can apply to all sections that takes work, slowly adding page after page is scope creep.
And asking a contributor to fix your entire site is way beyond the scope of the forums, respect Tim’s time.

If your just looking to incrementally DIY specific sections yourself then use the design forum as intended Store Design so other merchants and contributors can do the work for free.
Just search theme name + section|page + responsive it’s not hard it’s right there to use:
https://community.shopify.com/search?q=dawn+responsive

[tim_1]

I guess Paul is right and we’re probing the boundaries of a “free forum advise” here.
You can try and target your first hero section differently – this should apply to all of them.

Use this code instead – it should go into “Theme settings”-> Custom CSS instead of each section “Custom CSS”:

@media (min-width:1024px) and (max-width:1205px) {
  main > [id*=ss_hero]:first-child > div {
    margin-top: -115px !important;
  }
}