How to remove extra space on mobile view in container, coding trouble shoot problem!

sleepyflow3r
Tourist
6 0 2

There's an additional space in a container on mobile view that I can't seem to get rid of.. i don't know why the code is not resizing or fitting to page. Please help!

IMG_4103.PNG

 Store link: www.witchaven.co

Store password: foolde

 

Pallavi
Shopify Expert
2170 353 462

Hello @sleepyflow3r 

Please share me page link.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
sleepyflow3r
Tourist
6 0 2

The page link is https://witchaven.co/pages/meet-test

password is foolde.

Pallavi
Shopify Expert
2170 353 462

Hello There,

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

@media screen and (max-width:749px){
.Container .container {
display: flex;
flex-wrap: wrap;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
sleepyflow3r
Tourist
6 0 2

This solution did not work and broke the website.

IMG_B2CAD8683D46-1.jpeg

0 Likes
Pallavi
Shopify Expert
2170 353 462

Hello @sleepyflow3r 

Please add proper css in the file.

@media only screen and (max-width:749px){
.Container .container {
    display: flex;
    flex-wrap: wrap;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
sleepyflow3r
Tourist
6 0 2

It worked on mobile successfully but it messed up my desktop view.

Screen Shot 2021-07-02 at 1.24.26 AM.png

0 Likes
Pallavi
Shopify Expert
2170 353 462

Hello There,

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

@media screen and (min-width:750px){
.container .Container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 0.5fr));
    grid-template-rows: repeat(5, 1fr);
    grid-auto-columns: 1fr 1fr;
    gap: 5px 5px;
    grid-auto-flow: row;
    width: 70%;
    height: 100%;
    justify-content: center;
    align-items: center;
    max-width: 900px!important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
sleepyflow3r
Tourist
6 0 2

Unfortunately, that code didn't change or update anything... any other suggestions?  

0 Likes