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

Solved
DevinDnl
Tourist
8 0 4

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

DevinDnl_0-1613584229316.png

 

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

DevinDnl_1-1613584296889.png

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

DevinDnl_2-1613584414334.png

Is there anyone that knows how to do this?

 

 

 

 

 

 

 

 

 

 

KetanKumar
Shopify Partner
14539 1675 5221

@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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DevinDnl
Tourist
8 0 4
KetanKumar
Shopify Partner
14539 1675 5221

@DevinDnl 

Thanks for the store URL

can you please highlight the issue on images?

bcz i have checked it's working fine

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DevinDnl
Tourist
8 0 4

@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.

DevinDnl_0-1613652378202.png

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.

 

DevinDnl_1-1613652636384.png

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:

DevinDnl_2-1613653070012.png

This examply is created in Photoshop.


Do you know if this is possible?

 

 

0 Likes
KetanKumar
Shopify Partner
14539 1675 5221

This is an 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%;}
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DevinDnl
Tourist
8 0 4

@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:

DevinDnl_0-1613673321153.png

 

 

KetanKumar
Shopify Partner
14539 1675 5221

This is an accepted solution.

@DevinDnl 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DevinDnl
Tourist
8 0 4

@KetanKumar 

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

KetanKumar
Shopify Partner
14539 1675 5221

@DevinDnl 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes