Mobile View is shown overflow

[relishnineties]

Hello Everyone,

My site is shown overflown on Mobile view.

Header shows overflown to right , Footer shows overflown to right and bottom.

Tried different solutions from previous posts but did not work.

Can someone please help in this?

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @relishnineties 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 600px) {
.footer-block--newsletter {
    margin-left: 0px !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 112px !important;
}
}

Can you add more this code to last line file base.css @relishnineties 

[BSS-TekLabs · Accepted solution]

change this code 

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 112px !important;
}
}

to this code 

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 144px !important;
}
    .small-hide {
        display: flex !important;
    }
}

[BSS-TekLabs]

Hello @relishnineties 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[relishnineties]

Hell @BSS-TekLabs ,

Please find address (https://relishstore.in/)
password: 1Minute@plz

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @relishnineties 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (max-width: 600px) {
.footer-block--newsletter {
    margin-left: 0px !important;
}
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[relishnineties]

Hi @BSS-TekLabs ,

Thanks for the response. My footer overflow is gone now.

But Header now does not show Add to Cart/Wishlist/Login button on Mobile.

[BSS-TekLabs · Accepted solution]

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 112px !important;
}
}

Can you add more this code to last line file base.css @relishnineties 

[BSS-TekLabs]

- Here is the result you will achieve: 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @relishnineties .

[relishnineties]

Hi @BSS-TekLabs ,

Thank you for your quick response. All the solution provided worked for me.

Thanks for your quick responses.

[BSS-TekLabs · Accepted solution]

change this code 

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 112px !important;
}
}

to this code 

@media only screen and (max-width: 600px) {
.header__icons {
    position: absolute !important;
    right: 144px !important;
}
    .small-hide {
        display: flex !important;
    }
}

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

[BSS-TekLabs]

@media screen and (min-width: 990px) {
    .header__inline-menu {
        position: absolute !important;
        left: 21px !important;
    }
}