Full width image on top of pages - Debut

Solved

Hi there,

 

I have placed an image at the top of my shipping page and want this to cover the full width. I've tried a couple of things but then the page content changed to full width as well. Does anyone know what to add to the scss file (and maybe delete from below code) to achieve this? 

 

this is the page code

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
   <div class="section-header text-center">
      </div> 
    <div class="rte">
{% section 'image-bar' %}
   
        {{ page.content }}
      </div>
    </div>

Thank you so much, really appreciate it!

0 Likes

Hello @Infratech_Digit ,
Please share your site link so we check and will suggest the best solution.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Shopify Expert
665 170 199

Hi, @Infratech_Digit ,

This is Evita from On The Map.

 

I need to see your store, to see what the problem is, but maybe you can edit little bit of liquid code:

<div style="width: 100%">
   <div class="rte full-width-image">
         {% section 'image-bar' %}
   
        {{ page.content }}
      </div>
 </div>

and css

.full-width-image, .full-width-image img {
   width: 100%;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Hi there, thanks for replying. Sorry I thought I included the link!

 

https://www.fyeyewear.com/pages/delivery-info

 

 

0 Likes

hi @oscprofessional  and @OTM I would be super happy if you'd have the time to take a look at it. The link is https://www.fyeyewear.com/pages/delivery-info

 

Thanks so much!

0 Likes

Success.

Hello @Infratech_Digit ,
You have to do change on liquid file , move the div above the main div i have shown in screenshot .
code1.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like

That worked perfectly, thank you so much!

0 Likes