Image sizes to be under search

Support
#1

Images showing up to big when users search on our website.

https://browsbynaomi.com/?s=waxing

#2

Hi Sasan,

Thank you for reaching out to us. You can show the articles in columns on the search page, this will make the images to show smaller. To do this add the following code in the Theme Options > CSS:

@media screen and (min-width: 980px) {
    .search-results article {
        width: 30%;
        display: inline-block;
        vertical-align: top;
    }

    .search-results .entry-title {
        padding: 0;
        margin: 0;
        font-size: 180%
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    .search-results article {
        width: 48%;
        display: inline-block;
        vertical-align: top;
    }

    .search-results .entry-title {
        padding: 0;
        margin: 0;
        font-size: 180%
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

I added the css code but images are still the same size.

#4

Hey Sasan,

The custom code provided by Nabeel is supposed to make the search results look like this:

Because you’re not getting that, you might have not copied the code completely or there’s a syntax error in your existing custom CSS. Please check your custom CSS or have a developer check your CSS.

If you just want the images to be smaller, use this custom code instead.

.search-results .entry-featured {
    max-width: 50%;
    margin: 0 auto;
}

Provided there’s no error in your current CSS and copied the code completely, you should be getting this:

Hope that helps.

#5

I applied the coding and on desktop the images are still way to big.

#6

Hello Sasan,

The code is not working because you have inserted it incorrectly.

@media screen and (max-width:768px){
    .x-frame-map-embed .x-frame-inner{
        padding-bottom:100% !important;
    }
    .search-results .entry-featured{
        width:60%;
        margin:0 auto;
        display:block;
        .grecaptcha-badge{
            display:none;
        }
        .search-results .entry-featured{
            width:60% !important;
            margin:0 auto !important;
            display:block !important;
        }
        @media screen and (min-width:980px){
            .search-results article{
                width:30%;
                display:inline-block;
                vertical-align:top;
            }
            .search-results .entry-title{
                padding:0;
                margin:0;
                font-size:180%
            }
        }
        @media screen and (min-width:768px) and (max-width:979px){
            .search-results article{
                width:48%;
                display:inline-block;
                vertical-align:top;
            }
            .search-results .entry-title{
                padding:0;
                margin:0;
                font-size:180%
            }
        }
        .search-results .entry-featured{
            max-width:50%;
            margin:0 auto;
        }

Please have it corrected and make sure that you are adding the correct code. Perhaps this code instead;

@media screen and (max-width:768px){
    .x-frame-map-embed .x-frame-inner{
        padding-bottom:100% !important;
    }
    .search-results .entry-featured{
        width:60%;
        margin:0 auto;
        display:block;
    }
    .grecaptcha-badge{
        display:none;
    }
    .search-results .entry-featured{
        width:60% !important;
        margin:0 auto !important;
        display:block !important;
    }
  }

@media screen and (min-width:980px){
    .search-results article{
        width:30%;
        display:inline-block;
        vertical-align:top;
    }
    .search-results .entry-title{
        padding:0;
        margin:0;
        font-size:180%
    }
}
@media screen and (min-width:768px) and (max-width:979px){
    .search-results article{
        width:48%;
        display:inline-block;
        vertical-align:top;
    }
    .search-results .entry-title{
        padding:0;
        margin:0;
        font-size:180%
    }
}
.search-results .entry-featured{
    max-width:50%;
    margin:0 auto;
}

Kindly let us know how it goes.

#7

Perfect! it’s now working

#8

Glad this is now sorted out.

For more inquiries, please open a new thread.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.