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

Store Design
1

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
IMG_4103.PNG1284×2778 300 KB

Store link: www.witchaven.co

Store password: foolde

1 Like
2

Hello @sleepyflow3r

Please share me page link.

1 Like
3

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

password is foolde.

1 Like
4

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;
}
}
5

This solution did not work and broke the website.

IMG_B2CAD8683D46-1.jpeg
IMG_B2CAD8683D46-1.jpeg1284×2778 149 KB

6

Hello @sleepyflow3r

Please add proper css in the file.

@media only screen and (max-width:749px){
.Container .container {
    display: flex;
    flex-wrap: wrap;
}
}
1 Like
7

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

Screen Shot 2021-07-02 at 1.24.26 AM.png
Screen Shot 2021-07-02 at 1.24.26 AM.png2880×1800 545 KB

8

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;
}
}
9

Unfortunately, that code didn’t change or update anything… any other suggestions? :slightly_smiling_face: