I help multiple people with their Shopify sites. One in particular I am working on is for 2fPerformance.com. I have been working on the mobile view for the site and noticed that you can zoom out on an iPhone or Android and it has a fairly large padded section on the right hand side. I have attempted to modify this in the Theme.liquid.css file without much luck. My changes work if you use the inspect tool on a desktop but it doesnt on mobile. Here is the link to an example of what happens. https://2fperformance.com/products/lexus-ls400-ucf10-89-94-lfc-rear-replacement-panels
Here is what I added to fix the issue.
/* ============== test-query =========== */
@media only screen and (max-width: 1024px) {
.site-header__link {
display: table-row;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px){
.site-header__search-cart-wrapper{
display: inline-flex;
justify-content: flex-end;
}
.site-header__link{
display: inline-flex;
justify-content: flex-end;
}
}
@media only screen and (max-width: 768px){
.site-header__search-cart-wrapper{
justify-content: flex-start;
}
}
.rte:last-child {
padding: 0 20px;
}
h1, h3, .h3 {
padding: 0 10px;
}
