Atelier Theme - how to set padding top only on desktop

[runwayfashion]

Hi, im trying to set the padding top to 40px on product page, desktop only?

Thank you in advance.

URL: Runway

[andriihudimov]

@runwayfashion You can add one more schema such a enable desktop paddding as the checkbox type with the false default value. And give the condition using Liquid if in your classname.
Liquid schema :

{
  "name": "Section",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_desktop_padding",
      "label": "Enable desktop padding",
      "default": false
    }
  ]
}

On your specific class

<div 
  class="section-wrapper
  {% if section.settings.enable_desktop_padding %}
    desktop-padding
  {% endif %}"
>
  ...
</div>

Add this CSS

@media screen and (min-width: 1024px) {
  .desktop-padding {
    padding: 60px;
  }
}

[andriihudimov]

Here style padidng-top: 40px

[runwayfashion]

Hi, which file do the scheme go into? im using Atelier theme. Or if there is a simple css to target desktop only?

[andriihudimov]

@runwayfashion Find this css “variant-picker__form“. And on that file you can see the schema. And min-width: 1024px will only works for desktop only.

[devcoders]

Hi @runwayfashion

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > styles.css and paste this at the bottom of the file:

@media (min-width: 768px) {
  .product-details {
    padding-top: 40px;
  }
}

[Dan-From-Ryviu]

Please add this code to Custom CSS in Theme settings

@media (min-width: 750px) {
div[data-testid="product-information-details"] {
padding-top: 40px;
}
}

[AnneLuo]

Hi, @runwayfashion

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (min-width: 1024px) {
   .product-details {
      padding-top: 40px;
    }
 }
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

[Mustafa_Ali]

Hey @runwayfashion Try this one By follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution

<style>
@media screen and (min-width: 768px) {
div#ProductInformation-template--26184826782024__main {
    padding-top: 40px !important;
}
}
</style>