Recipes in recipe search page bug

Hi @hungryinthailand,

You can use the below CSS code via Appearance > Customize > Additional CSS to fix it.

@media screen and (max-width: 767px){
    .dr-advance-search .dr-search-item-wrap {
        flex-direction: row;
    }
}

Let us know if you need any assistance.

Thank you.

P.S. We love the way you have built your site.

It worked, thanks!

Thank you so much for that compliment, very needed after months without traffic/engagement.

Now I have another question if you don’t mind.
Is there a way to hide the recipe keys that are showing on the recipes at the search page?

It is ok for them to show up in the recipe card itself, but I’d like to hide them on the search page and when embedded, because on mobile there are too many symbols showing and that hides the image. Also there is no explanation for the symbol on mobile devices unless clicked on.

I have only found an option to hide them in the recipe card itself.

Hopefully you understand what I mean. Thank you

Hi @hungryinthailand,

We checked your site indexing status and found that it has been already indexed – https://tppr.me/cJjR4 It will take some time to rank on different keywords and bring traffic to your site.

Instead of hiding that for all devices, you can hide it just for mobile devices using the below CSS code.

@media only screen and (max-width: 767px){
    div[data-elementor-id="9925"] .dr-archive-single .dr-category{
        display: none;
    }
}

Let us know if this works for you or not. If you have any further questions, let us know.

Hello. Thank you for checking the index status.

I chose to hide the symbols on all devices.

I have found some new bugs:

On https://hungryinthailand.com/thai-recipes/
At the last few recipes there is no image (on mobile device)

Once i go to page 2 of recipes https://hungryinthailand.com/thai-recipes/page/2/ (on mobile) the images of my categories turn into a circle and the recipe list is very distorted. Recipes are showing underneath each other, with the recipe keys showing again. Plus no images at the last recipes.

Please help asap. Looks kinda unprofessional now.. thanks in advance!

Hi @hungryinthailand,

Please replace the earlier code with the below code:

div[data-elementor-id="9925"] .dr-archive-single .dr-category{
        display: none;
}
@media screen and (max-width: 767px){
    .dr-advance-search .dr-search-item-wrap {
        flex-direction: row;
    }
}
div[data-elementor-id="9925"] .elementor-image-box-img img{
    border-radius: 20px !important;
}
.elementor-column-gap-extended>.elementor-column>.elementor-element-populated{
    padding: 15px;
}

On the second page, the recipe at the top appear three in a row. Please look into Elementor settings to configure it.

While we try to respond to all the queries here, sometimes there might be delays. So, we recommend reaching out to our support team whenever you need assistance with CSS.

Thank you.