Jump to content

Some help with CSS


Heyhoe

Recommended Posts

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

BeforeBLOCK.pngAFTERBLOCK.png

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.

 

Link to comment
Share on other sites

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 "}"

Link to comment
Share on other sites

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;
	}
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...