Some help with CSS

[Heyhoe]

I can usually muddle my way through these kind of things but this one has me stumped.

Basically, as you can see in the above screenshots, I want the Title, user, price and questions data to be inline with the record image on mobile.

If I uncheck "Block" on the firefox rules, the content moves to where I want it. I tried this code:

/* Smartphones (portrait and landscape) ----------- */  
@media screen and (max-width: 979px) {  
/* Styles */  
  
  [data-pageapp='classifieds'].ipsDataList .ipsDataItem_main {
  display: inline;
  }

However, this does not work. I'm obviously not using the correct classes and it is inheriting "block" from somewhere else. It looks like there are loads of classes using the same CSS and I don't want to mess up anything by using unnecessary classes.

If somebody could point me in the right direction it would be appreciated.

Thanks guys.

 

[Heyhoe]

Sorted!

Probably not correctly mind.

I just copied all of the CSS selectors in the big list and set the display to "table-cell" and it seems to have sorted it..

[Heyhoe]

UGH!

This didn't work as it messed up the CSS on the main page with the categories listing.

Is there any way to target a single page within an app??

[Adlago]

1 hour ago, Heyhoe said:

 

/* Smartphones (portrait and landscape) ----------- */  
@media screen and (max-width: 979px) {  
/* Styles */  
  
  [data-pageapp='classifieds'].ipsDataList .ipsDataItem_main {
  display: inline;
  }

 

In this code you are missing a closing brace "}"

[TAMAN]

You can target by data-baseurl="http://www.kartreview.co.uk/classifieds/category/1-for-sale/?page=1" to apply only on that page

@media screen and (max-width: 979px) {  
	[data-pageapp='classifieds'] [data-baseurl="http://www.kartreview.co.uk/classifieds/category/1-for-sale/?page=1"] .ipsDataList .ipsDataItem_main {
		display: table-cell;
	}
}

or everywhere on classifieds page

@media screen and (max-width: 979px) {  
	[data-pageapp="classifieds"] .ipsDataList .ipsDataItem_main {
		display: table-cell;
	}
}

 

[Heyhoe]

Thanks for the help TAMAN.

Could you use a partial URL in the data-baseurl?, such as:

[data-baseurl="http://www.kartreview.co.uk/classifieds/category"] .ipsDataList .ipsDataItem_main

which would target pages containing that URL?

For now I have added some inline CSS on the template of the category template which seems to do the job but is not ideal for upgrades etc.

[TAMAN]

51 minutes ago, Heyhoe said:

Thanks for the help TAMAN.

Could you use a partial URL in the data-baseurl?, such as:

[data-baseurl="http://www.kartreview.co.uk/classifieds/category"] .ipsDataList .ipsDataItem_main

which would target pages containing that URL?

For now I have added some inline CSS on the template of the category template which seems to do the job but is not ideal for upgrades etc.

No, this is auto generated 

if you dont want to apply the css on .ipsDataItem_main on other pages

you could just target by this id  elTable_68cdb9dfa56b2f6a5bf628131a316fb5  Its in the page category 

@media screen and (max-width: 979px) {  
	#elTable_68cdb9dfa56b2f6a5bf628131a316fb5 .ipsDataList .ipsDataItem_main {
		display: table-cell;
	}
}

this will target the category you posted in the image above 

[Ohio Guns]

Have you tried just adding it to the classifieds CSS so it won't mess with the forums CSS?

[Heyhoe]

Its messing up the category listings on the Classifieds app @Ohio Guns.

Thanks TAMAN, that's worked!