Aspect Ratio Is Wrong On Desktop But Fine On Mobile? (Broadcast Theme)

Shopify Discussion
,

Topic summary

Issue: On a Shopify store (Broadcast theme), the desktop layout appeared shrunken with white bars on the right, while mobile looked normal. The behavior persisted across another store version, despite no recent changes.

Resolution: The storefront issue was fixed by identifying an app as the cause and removing/adjusting it. No specific app was named.

Follow-up styling: A participant noted the logo is off-center on larger screens. They recommended adding “justify-content: center;” to the .section-double__aside class, which already uses flexbox, to center content.

Implementation guidance: The CSS should be added in the theme’s CSS file (assets/theme.css), not in section-double.liquid. Find the .section-double__aside selector and add “justify-content: center;” within its curly brackets.

Notes: Screenshots were shared to illustrate the off-center logo and where to place the CSS rule. Dawn was mentioned only for familiarity; the fix applies to Broadcast as well.

Status: Primary display issue resolved via app removal; CSS centering tweak pending correct file edit. No further open questions noted.

Summarized with AI on January 24. AI used: gpt-5.
1

For some reason my Shopify Store aspect ration on desktop is set to what it should be on mobile? On mobile, it looks normal but on desktop it’s all smaller than it should be causing there to be white bars where there shouldn’t be.

It’s locked currently but here is the link
https://olimpiajames.com/

If you go to that, you can see the white bar on the right hand side. On mobile, i tried doing view as desktop and it’s literally a small little square on the top left. I didn’t make any change’s to it so I don’t know how this happened? I also tried another version I had - and it did the same thing.

2

Fixed it, looks like a app was causing the issue.

3

Hey! Looked at your site before seeing you had figured it out :slightly_smiling_face:
You’ll want to add justify-content: center; on yoursection-double__aside class (I noticed you already have flex on there) - your logo is currently off-centre on larger screens :+1:

Screenshot 2023-07-11 at 15.13.21.png
Screenshot 2023-07-11 at 15.13.21.png4130×2170 182 KB

4

oh no way!

I tried adding it into the “section-double.liquid” in code but doesn’t seem to work. Is this where you had advised to add it?

5
{%- for block in section.blocks -%} {%- case block.type -%} {%- when 'heading' -%} {%- if block.settings.title != blank -%} {%- assign animation_counter = animation_counter | plus: 1 -%} {%- assign font_size_class = block.settings.text_size | prepend: 'heading-size-' -%}

{{ block.settings.title }}

{%- endif -%}

I found this in the theme, where in there should i add it?

6

Hi OlympiaJames,

Looks like it’s in the theme.css file. (I don’t know which theme you’re using, I’m only familiar with Dawn, but this should be in the assets folder).

You’ll want to search for .section-double__aside and add justify-content: center; within the curly brackets.

Screenshot 2023-07-11 at 15.34.49.png
Screenshot 2023-07-11 at 15.34.49.png672×270 29.2 KB