Add margin to footer on desktop - Ride theme

Store Design

Topic summary

A user wants to add left and right padding/margin to their Shopify store’s footer, but only on desktop devices, not mobile.

Initial Problem:

  • Added CSS code for footer padding but needs it to apply exclusively to desktop viewports
  • Using the Ride theme

Solutions Proposed:

  1. ZenoPageBuilder suggested wrapping the CSS in a media query:

    • @media (min-width: 990px) { /* desktop code */ }

  2. User’s attempt failed - the code stopped working when they tried implementing the media query

  3. Dan-From-Ryviu provided alternative code:

    • Media query with min-width: 768px
    • Targets footer element with 100px left/right padding
    • Recommends adding to Custom CSS section of footer

Status: The discussion appears ongoing, awaiting confirmation if the latest solution resolves the issue. The user also mentioned wanting the footer section to match the width of the policy links section.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I’ve added the below code to add margin to the footer but I want it to only apply to desktop, how do I do this?

Screenshot 2023-11-21 at 09.43.02.png
Screenshot 2023-11-21 at 09.43.02.png692×444 27.1 KB

website

password: meifay

Thanks so much!

2

Hello @INFRA :waving_hand:

You can add media query like this

@media (min-width: 990px) {
    Code for desktop
}
3

hi there, thanks for your reply. Ufortunately, the code stops working altogether when I add that in front.

is this correct?

@media (min-width: 990px) {
  padding-left: 200px;
  padding-right: 200px;
}

Ideally I just want it the same width as the footer section with the policy links :slightly_smiling_face:

4

Hi @INFRA

You can try to add this code to Custom CSS of footer section

@media (min-width: 768px) {
  footer {
    padding-left: 100px;
    padding-right: 100px;
  }
}
1 Like