CSS code for one page only - Debut theme

Shopey
Explorer
63 0 11

Hi,

I have created a brand page on Shopify using table. The content was not compatible with the mobile so I added CSS to theme.scss.liquid file. It worked! But it has affected another page too. So I want this CSS apply to this brands page only. Please let me know any code which would work. Thank you!

Website: www.shopey.ae

Code I added is:

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; 
       
    }
	
	td { 
		/* Behave  like a "row" */
      	border: none; 
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 5%;
        padding-bottom: 8%;
        white-space: nowrap;
        height: 25px;   
        font-size: 18px;

	}
  	

 

0 Likes
suyash1
Shopify Partner
2480 263 398

@Shopey - can you please share page link? I clicked brands in menu but it opened drop down

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Shopey
Explorer
63 0 11

Hi @suyash1 ,

There is a sub-heading named view all under brands. 

This is the page link: https://www.shopey.ae/pages/brands

 

 

0 Likes
suyash1
Shopify Partner
2480 263 398

@Shopey - you css is correct, issue is this needs to be applied page specific but this page do not have unique id which can be used for css

so template code needs to be changed to add unique id to page and then apply css

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Shopey
Explorer
63 0 11

Hi @suyash1 ,

Could you please guide me how to do it? 

I just added code with the help of google.

0 Likes
suyash1
Shopify Partner
2480 263 398

@Shopey - can you please add me to staff? this will need code editing, you can use email given below.

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Shopey
Explorer
63 0 11

Hi @suyash1 ,

Thanks for offering help. I have added you as staff and given you access of theme. Please check.

suyash1
Shopify Partner
2480 263 398

@Shopey - please this and other pages, clear browser history and cache too

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Shopey
Explorer
63 0 11

Done

0 Likes
suyash1
Shopify Partner
2480 263 398

@Shopey  other pages should not be affected by this 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes