How to change css on specific custom page

JessAnderson_
Tourist
14 0 3

Hi all, 

I am trying to apply the same css to my custom page as I did my home page.
The page I am trying to target is the 'FLX 1.0 Challenge' page.

How do I go about this?
Any help will be highly appreciated.

Website url: leahcarrollfitness.com.au
password: teishi

Screen Shot 2021-01-16 at 6.03.51 pm.png

0 Likes

1. Log in to your Shopify Admin.

2. In the sidebar on the left, click on "Online Store."

2. You'll be on the "Themes" page by default. Click on the "..." button for your currently published theme, then click "Edit HTML/CSS."

3. On the left side, scroll down to the Assets folder, then click on it and click on the CSS file. It will probably be named something like style.css.liquid or theme.css.liquid, although this may vary depending on which theme you are using.

Many themes now use SCSS, so it may look something like this: "style.scss.liquid" or "theme.scss.liquid." If you don't see a file with this name, look for another file that ends in ".css.liquid" or ".scss.liquid." This is the file you'll be editing to add your CSS.

4. Add your CSS!

If you are following another Shopify tutorial on Ecommerce Pulse, go back to that page now to continue the tutorial. Note: To avoid interfering with the existing CSS, I suggest scrolling down to the bottom of the file and adding CSS there.

Blogbaba
0 Likes
JessAnderson_
Tourist
14 0 3

Hi, thanks for your reply. 

I have been customising a bunch in theme.css, the only issue I am finding is that my code is not changing the look of my desired page. 

I have added my code sample here, I am merely trying to use one banner image for mobile and another for desktop (as shown on home page). 

Is there a page ID I can use to help this?

@media only screen and (max-width: 749px){
#shopify-section-challenge-banner2 {
    display: none!important;
    
}
}



@media screen and (min-width: 750px) {
#shopify-section-challenge-banner {
    display: none!important;
    
}
}


@media screen and (max-width: 749px) {
#shopify-section-challenge-banner .btn {
margin-top: 400px!important;
}
}




0 Likes