resize photos

[grisbi]

Hello
How to resize thumball in listings currently in 95 x 85 i would like 120 x 90

thank you

see you soon

[marius-ciclistu]

main.css

Code: [Select]

.listing-card .listing-detail {
width: auto;
margin-left: 105px; //make this 125
}
and

Code: [Select]

.listing-card .listing-thumb img {
    height: 85px; //make it 90
    width: 95px; //make it 120
}
After modifying main.css you must look in scss folder and identify the file that contains these codes and change them as well.
/oc-content/themes/bender/sass/list.scss

Thank you for the question, I thought of this but I did not resolved it until now.
EDIT: This is not looking good on mobile with 240x200 and 245 margin!
And a suggestion. use 240x200 and 245 margin left. (or the image size of your thumbnails).

[Web-Media]

Good css trick but not recomended . The image must fit the container . 245x200 is double the size needed .
 A function to resize the image on item post is required  as needed /theme

[marius-ciclistu]

In my case 240x200 is the thumbnail size.
If I put
.listing-card .listing-thumb img{height:85px;width:95px}.listing-card .listing-detail{width:auto;margin-left:105px} after @media only screen and (max-width: 480px){
so

Code: [Select]

@media only screen and (max-width: 480px){.listing-card .listing-thumb img{height:85px;width:95px}.listing-card .listing-detail{width:auto;margin-left:105px}in main.css it works fine also on mobiles.

Now I must find the scss file to modify there also.

EDIT.
Also

Code: [Select]

@media only screen and (max-width: 640px){.listing-card .listing-thumb img{height:100px;width:120px}.listing-card .listing-detail{width:auto;margin-left:125px}
EDIT
The scss files are
oc-content/themes/bender/sass/responsive/480.scss
and
oc-content/themes/bender/sass/responsive/640.scss

[grisbi]

Ok thanks for your help

If you want it I have another request
I would like to display the price on the following line

Here is the category the city the date and the price
Then below the description

I want to display price between category and description

Thank you you are nice

[marius-ciclistu]

Look in loop-single.php in your theme and move the line with the price 2 rows down, before description.

[grisbi]

everything is working
all my thanks

[marius-ciclistu]

You are welcome.
Thank you also, because with your question I modified my site also:)

[marius-ciclistu]

I'm sorry. This breacked the mobile display in grid view in mobile view.

[marius-ciclistu]

Solution:

480.scss
Add this at the begining instead of the earlier mentioned css:

Code: [Select]

.listing-card .listing-thumb img{height:85px;width:95px}.listing-card .listing-detail{margin-left:105px}.listing-grid .listing-detail{margin-left: 0}.listing-grid .listing-card img{width:92%;height:auto}
640.scss
Analog

Code: [Select]

.listing-card .listing-thumb img{height:100px;width:120px}.listing-card .listing-detail{margin-left:130px}.listing-grid .listing-detail{margin-left: 0}.listing-grid .listing-card img{width:92%;height:auto}

main.css
Add the above codes at the begining of the
@media only screen and (max-width: 480px)
and
@media only screen and (max-width: 640px)

instead of the earlier mentioned css.

[marius-ciclistu]

 The recomended format for the scss code mentioned earlier is:
In 480.scss

Code: [Select]

.listing-card {
    .listing-thumb img{height:85px;width:95px}
    .listing-detail{margin-left:105px}
    }
.listing-grid {
    .listing-detail{margin-left: 0}
    .listing-card img{width:92%;height:auto}
}
In 640.scss

Code: [Select]

.listing-card {
    .listing-thumb img{height:100px;width:120px}
    .listing-detail{margin-left:130px}
    }
.listing-grid {
    .listing-detail{margin-left: 0}
    .listing-card img{width:92%;height:auto}
}