search result dropdown customazition

Hi,
I’m using full screen 2/form search but on phone the result is just 1 column with big product picture, can I customize it so it shows 2 columns per row, or a list view?

Attachments:

You must be logged in to view attached files.

Hello,

Please navigate to WoodMart > Header Builder, edit the Search element in your Mobile Header, and choose the desired Search display option:

Form – Displays the search results in a list view. Like this: https://postimg.cc/XGS2Z171
Full Screen – Displays the search results in a 2-column grid on mobile. Like this: https://postimg.cc/XGS2Z171

After selecting your preferred display mode, save the header and check the search results on your mobile device.

If you would like to keep your current search style and only customize its layout, please share your WP Admin login details in the Private Content field. I will check your site and provide a possible CSS solution if applicable.

At the moment, I am unable to access your website because it is in maintenance mode.

Best Regards

I would like to keep my search style
I’ll attach login info

forgot to mention, I only need the customization for the mobile version, I have two headers, “white header” and “transparent header”, the transparent one is set for the home page and overlap is activated

Hello,

If you want the search result in 2-Column Grid Layout try to add the following Custom CSS code in Theme Settings > Custom CSS > Custom CSS for mobile:

.wd-search-full-screen-2 .wd-suggestions-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important; /* Reduces spacing to fit smaller screens */
}

If you want List View Layout use this Custom CSS Code in mobile CSS area in Theme Settings:

.wd-search-full-screen-2 .wd-suggestions-group {
        grid-template-columns: 1fr !important; /* Forces 1 column row */
        gap: 15px !important;
}

.wd-search-full-screen-2 .wd-suggestion {
        flex-direction: row !important; /* Aligns image and text side-by-side */
        align-items: center;
        gap: 15px;
}

 .wd-search-full-screen-2 .wd-suggestion-thumb {
        width: 80px !important; /* Controls the size of the picture */
        flex-shrink: 0;
}

Best Regards

[Author]

Posts