Looking for a way to expand the title to full width on mobile

[DevinDnl]

Hi all,

I am currently creating a webshop with 'Out of the Sandbox's' Responsive theme.
I have added some custom css to show a background pattern with a page's title.
This went pretty easy but now I am stuck while trying to find a way to expand the title beyond the normal borders and cover the entire width of the screen.

Especially on mobile it bothers me that there is some white spacing on both sides.

1. Desktop view: Which is fine

2. Mobile view: Here I would like the title pattern to fill the entire width

3. The css code I use to show this pattern.

Is there anyone that knows how to do this?

[KetanKumar]

@DevinDnl 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[DevinDnl]

Hi KetanKumar,

Thanks. The website can be previewed on:

https://5l7hpp0qu9qtetw4-52632682660.shopifypreview.com/collections/skincare

[KetanKumar]

@DevinDnl 

Thanks for the store URL

can you please highlight the issue on images?

bcz i have checked it's working fine

[DevinDnl]

@KetanKumar 

Let me try to explain it a bit better:

The title is currently cut off at both sides to fit the layout of the rest of the shop.
Highlighted in the image below are the white areas left and right of the title section.

In the exampleof the mobile view the total width of the screen is 375px.
The title section, <div class = "one-whole column"> is limited to 336.25 px.

What I try to achieve is expanding that section to the full width of the screen (375px) without messing around with the rest of the layout of the page.
All other sections should remain at 336.25.

Eventually I want it to look like this:

This examply is created in Photoshop.


Do you know if this is possible?

[KetanKumar · Accepted solution]

@DevinDnl 

Thanks for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 798px) {
#shopify-section-collection-template section.section, #shopify-section-collection-template .one-whole.column {margin: 0;width: 100%;}
}

[DevinDnl]

@KetanKumar 

Thanks for the code.
Although it seems to do the job on mobile, on desktop it adjusts the page as well.
There everything is aligned to the left of the screen.

I have included an image to show what happens:

[KetanKumar · Accepted solution]

@DevinDnl 

oops, sorry i have updated the code can you please upload it again 

[DevinDnl]

@KetanKumar 

That did the job! 
Thanks a million for the help.

[KetanKumar]

@DevinDnl 

it's my pleasure to help us