No worry follow this:
<style>
@media screen and (min-width: 768px) {
.your_class{ margin-left: 40px !important; }
}
</style>
Add this in theme.liquid at end of file before
Send me store url so i can check if not work
Topic summary
Topic: Applying a desktop-only CSS style to a specific text via media query.
Key guidance:
- Correct syntax: Use a selector inside the media query, e.g. @media screen and (min-width: 768px) { .your_class { margin-left: 40px } }.
- Placement: Do not put the media query inside the div or as inline style. Add it to a CSS file (e.g., theme.scss) or, as suggested, in a block in theme.liquid near the end of the file before .
- Specificity: If the style doesn’t apply, use !important (e.g., margin-left: 40px !important) and ensure the element actually has the targeted class.
Notes:
- Media query = CSS rule that applies styles only when conditions (like min-width: 768px) are met (typically desktop widths).
- theme.scss = theme-wide stylesheet; theme.liquid = main layout where inline can be added if needed.
- Code snippets are central to understanding the solution.
Developments:
- The poster’s attempt in theme.scss didn’t work; access to backend was declined.
- A workaround was proposed: add a block in theme.liquid with !important.
- A link to another thread indicates a solution, but confirmation from the poster is not shown.
Status: Unconfirmed resolution; likely solvable with correct selector, placement, and specificity.