How to achieve full width mobile-only banner with Next theme?

Betterposter
New Member
5 0 0

Hi all,

We are trying to make the banner elements on our homepage full screen width for mobile only. 

We are using the Next theme. 

Can someone help?

link: betterposter.de 

Replies 6 (6)

Hardik29418
Shopify Partner
2913 419 1081

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
@media only screen and (max-width: 550px) {
  .shopify-section-template--20735443501383__b6184ece-069c-4055-a29f-37e355e18e2c{
     margin: 0 -16px;
  }
}
</style>

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Betterposter
New Member
5 0 0

Sadly I see no change on the website, is there an alternative?

Hardik29418
Shopify Partner
2913 419 1081

@Betterposter  Can you please set the code in theme.liquid.
 I need to check out what  is happening.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Betterposter
New Member
5 0 0

The code should be set and the site is up to date

	<head>
      <style>
@media only screen and (max-width: 550px) {
  .shopify-section-template--20735443501383__b6184ece-069c-4055-a29f-37e355e18e2c{
     margin: 0 -16px;
  }
}
</style>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>{{ page_title }}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}</title>
		{%- if page_description -%}<meta name="description" content="{{ page_description | escape }}">{%- endif -%}
		<meta name="theme-color" content="{{ settings.accent_color }}">
		<meta name="MobileOptimized" content="320">
		<meta name="HandheldFriendly" content="true">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5, viewport-fit=cover, shrink-to-fit=no">
		<meta name="msapplication-config" content="{{ 'browserconfig.xml' | asset_url }}">
		<link rel="canonical" href="{{ canonical_url }}">
		{% unless settings.primary_font.system? and settings.secondary_font.system? %}<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>{%- endunless -%}
		<link rel="preload" as="style" href="{{ 'screen.css' | asset_url }}">
		<link rel="preload" as="style" href="{{ 'screen-settings.css' | asset_url }}">
		{% if rtl_languages contains localization.language.iso_code %}<link rel="preload" as="style" href="{{ 'rtl.css' | asset_url }}">{% endif %}
		{% unless settings.primary_font.system? %}<link rel="preload" as="font" href="{{ settings.primary_font | font_url }}" type="font/woff2" crossorigin>{% endunless %}
		{% unless settings.secondary_font.system? %}<link rel="preload" as="font" href="{{ settings.secondary_font | font_url }}" type="font/woff2" crossorigin>{% endunless %}
		<link rel="preload" as="font" href="{{ 'icomoon.woff' | asset_url }}" crossorigin>
		<link media="screen" rel="stylesheet" href="{{ 'screen.css' | asset_url }}" id="core-css">
		{% if template == 'index.navigation' %}<link media="screen" rel="stylesheet" href="{{ 'theme-nojs-nav.css' | asset_url }}">{% endif %}
		<noscript><link rel="stylesheet" href="{{ 'async-menu.css' | asset_url }}"></noscript>
		{%- if template.name == 'collection' or template.name == 'search' -%}
			<link media="screen" rel="stylesheet" href="{{ 'page-collection.css' | asset_url }}" id="collection-css">
		{%- endif -%}
		{%- if template.name == '404' -%}
			<link media="screen" rel="stylesheet" href="{{ 'page-misc.css' | asset_url }}" id="misc-css">
		{%- endif -%}
		{%- if template.name == 'product' -%}
			<link media="screen" rel="stylesheet" href="{{ 'page-product.css' | asset_url }}" id="product-css">
		{%- endif -%}
		<link media="screen" rel="stylesheet" href="{{ 'screen-settings.css' | asset_url }}" id="custom-css">
		{%- if settings.favicon -%}
    		<link rel="icon" href="{{ settings.favicon | image_url: width: 32, height: 32 }}" type="image/png">
			<link rel="mask-icon" href="safari-pinned-tab.svg" color="#333333">
			<link rel="apple-touch-icon" href="apple-touch-icon.png">
    	{%- endif -%}
		<link rel="manifest" href="{{ 'manifest.json' | asset_url }}">
		<script>document.documentElement.classList.remove('no-js');</script>
		{% render 'social-meta-tags' %}
		{{ content_for_header }}
		{{ settings.custom_script_for_head }}
	</head>

diego_ezfy
Shopify Partner
2967 571 894

@Betterposter@Betterposter

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > screen.css and paste this at the bottom of the file:

@media (max-width: 600px){
    .template-index #content > [id*='section']:nth-child(1){
    width: calc(100vw - 4vw) !important;
        left: -4vw !important;
}
}

diego_ezfy_0-1709992699955.png

 


This is a bit of a hack, it's not the proper way to do this. It will only work as long as you always use this section as the first one. 

Ideally you'd want to:

1. add a class to that section to have proper control over it with CSS 
or
2. remove the global padding from the #root div and add individual padding to each section. It would be a lot of work, but this would be the best/safest way to properly code this imo.

Kind regards,
Diego

Betterposter
New Member
5 0 0

Thank you, that worked for the header. Is there a code to effect the other images on my site aswell?

 

To archive the second, I would have to recode most of the website am i right?