2 layouts for component

Hi Franco,

I checked your site here in mobile device but didn’t see any problem as it looks good, could you please confirm your status or clarify a little bit so I can assist you better ?

Hi,

In this case, please temporary disable CSS compression (in Extensions >>> Template Manager >>> choose your template >>> switch to tab T3 Options) then let me know. I need to take a closer look at the code in order to provide your CSS style for this part.

Hi,

There’s no need to extract code from jomclassifieds.css to the template, just open file root_folder/templates/ja_puresite/css/template.css and add this code at the end of file :

@media (max-width: 760px) {
#ja-content #jomclassifieds .listview tr:after {
content: "";
display: block;
clear: both;
}
#ja-content #jomclassifieds .listview td {
border: none;
width: auto !important;
}
#ja-content #jomclassifieds .listview td.date,
#ja-content #jomclassifieds .listview td:before {
display: none;
}
#ja-content #jomclassifieds .listview td.imgcol {
float: left;
}
#ja-content #jomclassifieds .listview td.imgcol img {
position: static;
max-height: none;
}
#ja-content #jomclassifieds .listview .imgblock {
height: auto;
padding: 0 !important;
}
}
@media (max-width: 480px) {
#ja-content #jomclassifieds .listview td.imgcol {
max-width: 40%;
}
}

Save your file and recheck.

Hi,

So you need to look for this part in previous code :

#ja-content #jomclassifieds .listview td.date,
#ja-content #jomclassifieds .listview td:before {
display: none;
}

then update a little bit as below :

#ja-content #jomclassifieds .listview td.date {
float: left;
}
#ja-content #jomclassifieds .listview td:before {
display: none;
}

The code to change product title (h2) is as below :

div#jomclassifieds .listview h2,
div#jomclassifieds h2 {
font-size: 20px; /* you can use this property or remove it if you don't want to change the font-size */
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; /* you can use this property or remove it if you don't want to change the font-family*/
}

Last thing is the @media query, the max-width indicate that custom CSS code inside will be used only when the viewport of device is smaller than 480px.