Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello,
In a row I applied a background image (row layout = full width; display = cover) https://www.screencast.com/t/mzizUdHTP, which looks great on the page. Although when I run a search that full width cover image seems to bleed outside of the search results box. Please see an example here: http://zoaripress.com/?s=about
I would like to have the image contained in the search results box or not displayed (display: none). Kindly advise on how I can achieve this please. Thank you in advance for your time.
Best regards,
Mel
Hi Mel,
I can’t seem to be able to replicate this issue in any of the themes I have on hand (including default themes). Do you have a public URL where we can take a look at what this looks like?
Hi Alex,
Yes here you go: http://zoaripress.com/?s=privacy. Thank you in advance for your help!
Hi Alex,
FYI, I updated my full width image row settings to "standard". Therefore you may not see the error on my previous link sent.
But I created a test page: http://zoaripress.com/test-live/ for you to see a page where I applied a bg image with the layout as full-width:
https://www.screencast.com/t/oXFKHdXW
Now when you run a search (right site bar) for "test", you'll see that the full-width image spans across the search results page. Ideally I want the image contained in the search boxed section like what you would now see here: http://zoaripress.com/?s=privacy.
Thank you so much and look forward to your reply.
Hi Mel,
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:
.search-results .siteorigin-panels-stretch.panel-row-style { margin: 0 auto !important; }How does that look?
You might also need to install the SiteOrigin CSS Editor.
Hello Alex,
Hope you had a great weekend! The CSS you provided worked
http://zoaripress.com/?s=test, with exception on larger screen resolutions i.e. 1954px wide: https://www.screencast.com/t/QDOL0ylj
Is there another CSS I can add for at 1954px wide screen please?
Thank you!
Mel
Hi Mel,
That’s odd. I just had a look at that page and it’s coming up correctly for me. Can you please try clearing your browser cache and taking another look? Sorry about this!
Hi Alex!
Yes I've refreshed my cache and checked on another computer that I've never visited the site on and still see the full width image bleed over in search result page on browsers with large screen size like shown below. FYI it's fixed on other small medium browser sizes just not on larger screen sizes. Kindly assist.
Hi Mel,
Oddly, I can’t replicate that. Hm. Try replacing the previous CSS with:
.search-results .siteorigin-panels-stretch.panel-row-style { margin: 0 auto !important; padding-right: 0 !important; padding-left: 0 !important; }How does that look?