Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
This is an 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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an 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
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an 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;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
- Here is the result you will achieve:
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an 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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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.
This is an 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
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
- Here is the result you will achieve:
- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @relishnineties .
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hi @BSS-TekLabs ,
Thank you for your quick response. All the solution provided worked for me.
Thanks for your quick responses.
This is an 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;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
- Here is the result you will achieve:
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
@media screen and (min-width: 990px) {
.header__inline-menu {
position: absolute !important;
left: 21px !important;
}
}
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025