Custom section not going full width on mobile due to Shopify page-width wrapper

Technical Q&A
, , ,
1

Hi everyone,

I’m working on a custom Shopify section (Liquid + CSS) that contains a payment form (iframe) and QR block.

The section itself is already set to:

width: 100%;
max-width: 100%;

However, on mobile, the section still appears constrained with left/right margins, causing long form text and labels to wrap too early and feel cramped.

Important points:

  • The page is set to full width in the theme editor

  • Desktop and tablet layouts are correct

  • The issue is mobile-only

  • The restriction appears to come from Shopify’s outer layout wrapper (e.g. .page-width / .container)

  • Adjusting padding or width inside the section does not solve it

  • I want to:

    • Keep desktop/tablet unchanged

    • Make the section nearly full-width on mobile, with only ~3px spacing on left and right

    • Avoid horizontal scrolling

Question:

What is the recommended / best-practice way to make a custom section escape the page-width wrapper on mobile only, while keeping the rest of the theme untouched?

Is using negative margins the correct approach here, or is there a cleaner Shopify-supported solution?

Any guidance or examples would be appreciated.

Thanks in advance!

2

Hey @biblionepal

Can you share the URL of that page on which that section is appearing so I can have a look?

Best
Moeed

3

Hey @biblionepal,

The best way to break out of it on mobile is to override its effect with a combination of width: 100vw and a transform, applied within a media query.

Give your custom section a unique class, say section-payment-form. Then, in your CSS (ideally in a dedicated CSS file for that section or within a <style> tag in the Liquid section file), add something like this:

@media screen and (max-width: 768px) { /* Adjust breakpoint to match your theme's mobile cutoff */
  .section-payment-form {
    width: 100vw; /* Make the section span the full viewport width */
    position: relative; /* Needed for left/transform to work relative to itself */
    left: 50%;
    transform: translateX(-50%); /* Center the element, effectively pulling it out of the container */
    padding-left: 3px; /* Add your desired inner spacing */
    padding-right: 3px;
    box-sizing: border-box; /* Ensures padding doesn't add to the 100vw width */
  }
}

This makes your section take up the entire viewport width, then centers it. The padding-left and padding-right on the section itself will give you the ~3px spacing you want inside the section. If you find 100vw causes a horizontal scrollbar on some devices, you might need to add body { overflow-x: hidden; } within the same media query as a safeguard.

Hope that helps, if it doesn’t we might need more information about the theme you’re currently on. There can be code blocking/overwriting what you’re trying to do

4

Here is the link: Complete Your Payment — Fast & Secure | BIBLIONEPAL

On desktop, the default left and right spacing looks fine. If the section stretches full width there, it doesn’t look good, so keeping the normal margins is okay.

But on mobile, the same spacing makes the section feel too narrow.
The form text gets constrained, lines break too early, and on smaller phones it becomes harder to read and use.

Because of this, the form doesn’t feel comfortable on mobile, even though the page itself is set to full width.

5

1000569722
10005697221080×2040 219 KB

6

Hey @biblionepal

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
div#shopify-block-AMmtLTHVmbXZqWDVpZ__ai_gen_block_9905328_rKVAjJ {
    width: 95% !important;
}
}
</style>

RESULT:

image
image350×765 52.6 KB

NOTE: You can adjust the width accordingly to however you like.

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

8

hi, here is the code, can you help where to tweak:

{% assign ai_gen_id = block.id | replace: ‘_’, ‘’ | downcase %}

{% style %}
:root {
–pc-bg-{{ ai_gen_id }}: hsl(30, 23%, 93%);
–pc-fg-{{ ai_gen_id }}: hsl(0, 0%, 20%);
–pc-card-{{ ai_gen_id }}: hsl(0, 0%, 100%);
–pc-primary-{{ ai_gen_id }}: hsl(14, 100%, 54%);
–pc-muted-{{ ai_gen_id }}: hsl(30, 15%, 90%);
–pc-muted-fg-{{ ai_gen_id }}: hsl(0, 0%, 45%);
–pc-border-{{ ai_gen_id }}: hsl(30, 15%, 85%);
}

.payment-capture-{{ ai_gen_id }} {
width: 100%;
max-width: 100%;
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
display: block;
}

.pc-mobile-banner-{{ ai_gen_id }} {
background: var(–pc-card-{{ ai_gen_id }});
border-radius: {{ block.settings.banner_border_radius }}px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
padding: {{ block.settings.banner_padding }}px;
margin-bottom: {{ block.settings.banner_margin_bottom }}px;
border: {{ block.settings.banner_border_width }}px solid {{ block.settings.banner_border_color }};
display: none;
}

@media (min-width: 750px) and (max-width: 1024px),
(min-width: 1025px) {
.pc-mobile-banner-{{ ai_gen_id }} {
display: flex;
}
}

.pc-banner-content-{{ ai_gen_id }} {
display: flex;
align-items: {{ block.settings.banner_align }};
gap: {{ block.settings.banner_gap }}px;
}

.pc-banner-icon-{{ ai_gen_id }} {
flex-shrink: 0;
width: {{ block.settings.banner_icon_size }}px;
height: {{ block.settings.banner_icon_size }}px;
color: var(–pc-muted-fg-{{ ai_gen_id }});
}

.pc-banner-text-{{ ai_gen_id }} {
flex: 1;
}

.pc-banner-heading-{{ ai_gen_id }} {
font-size: {{ block.settings.banner_heading_size }}px;
font-weight: {{ block.settings.banner_heading_weight }};
color: var(–pc-fg-{{ ai_gen_id }});
margin: 0 0 {{ block.settings.banner_heading_margin_bottom }}px 0;
line-height: {{ block.settings.banner_heading_line_height }};
}

.pc-banner-subtext-{{ ai_gen_id }} {
font-size: {{ block.settings.banner_subtext_size }}px;
color: var(–pc-muted-fg-{{ ai_gen_id }});
line-height: {{ block.settings.banner_subtext_line_height }};
margin: 0;
}

.pc-banner-link-{{ ai_gen_id }} {
color: var(–pc-muted-fg-{{ ai_gen_id }});
text-decoration: underline;
text-underline-offset: {{ block.settings.banner_link_underline_offset }}px;
transition: color 0.2s ease;
}

.pc-banner-link-{{ ai_gen_id }}:hover {
color: var(–pc-primary-{{ ai_gen_id }});
}

.pc-main-container-{{ ai_gen_id }} {
background: var(–pc-card-{{ ai_gen_id }});
border: {{ block.settings.container_border_width }}px solid {{ block.settings.container_border_color }};
border-radius: {{ block.settings.container_border_radius }}px;
padding: {{ block.settings.container_padding_mobile }}px;
box-shadow: {{ block.settings.container_shadow_x }}px
{{ block.settings.container_shadow_y }}px
{{ block.settings.container_shadow_blur }}px
rgba(0, 0, 0, {{ block.settings.container_shadow_opacity | divided_by: 100.0 }});
width: 100%;
}

@media (min-width: 750px) {
.pc-main-container-{{ ai_gen_id }} {
padding: {{ block.settings.container_padding_desktop }}px;
}
}

.pc-content-wrapper-{{ ai_gen_id }} {
display: flex;
flex-direction: column;
gap: {{ block.settings.content_gap_mobile }}px;
}

@media (min-width: 750px) {
.pc-content-wrapper-{{ ai_gen_id }} {
flex-direction: row;
gap: {{ block.settings.content_gap_desktop }}px;
}
}

{% endstyle %}