A user is experiencing layout issues with custom liquid code on their Athens theme homepage. The problem involves a slider with an adjacent advertising window that displays correctly on desktop but appears misaligned and positioned far to the right on mobile devices.
Key Issue:
@media only screen queriesProposed Solution:
A respondent suggested modifying the base.css file by adding custom CSS media queries targeting screens with max-width of 480px. The code snippet includes:
!important flagsStatus: The solution includes before/after screenshots demonstrating the proposed fix, but no confirmation yet on whether it resolved the issue.
At the top of my page there is a slider with a small advertising window next to it created using some custom liquid. I can’t seem to replicate this on mobile. It’s not centered and far off to the right side of the page. I am not familiar with how to properly adjust the mobile settings in the code using “@media only screen”. Can someone please help?
site: https://qmdirect.com/
pass: itsahg
Hi @qmdanny
Can you be more specific about what you want to edit? I’m not sure if this is what you want, but if you want your mobile screen to look like your desktop, you can do it this way:
@media only screen and (max-width: 480px){
.group {
display: flex;
gap: 1rem;
max-width: 100%;
}
.span_2_of_3 {
width: 70% !important;
}
.span_1_of_3 {
width: 30% !important;
}
.span_1_of_3 img {
width: 90% !important;
max-width: unset !important;
}
.smartSlideshow-wrapper {
min-width: 30px;
}
}
Here is the final result:
