Hi,
site: blgrafika.com/internwire/review
The header image is not responsive. In a slider frame I have added a background image (“SiteOrigin Layout Slider”) to a slide. But in the responsive view the header image is cut off width wise. Will appreciate if you can tell me how to fix it.
Regards
Hi Bhanur,
Unfortunately, there’s no way to make the image you’re using responsive. Responsive background images have to maintain aspect ratios (this is a CSS “feature”) and to do this the browser will crop your image if it has to. The issue with your image is that its 1366×144 which is a very hard aspect ratio to maintain without cropping. Sadly, it’s not possible to avoid this so I would recommend creating an alternative background image with a significantly smaller width.
I would recommend using the excellent Widgets for SiteOrigin’s Visibility functionality to handle the transition.
Sorry. :(
Hi Alex,
Thank you for your reply and help. I have added an image to the page http://blgrafika.com/internwire/contact-us/ with the same the height and width and that is working fine in the responsive mode. So was just wondering why it will not work on blgrafika.com/internwire/review. Will appreciate if there is any other solution for this and if I am missing something obvious that I need to be doing. Thank you again.
Regards
Hi Bhanur,
I mean, if you’re okay with it being that small then I’m able to provide a workaround. People typically prefer being told it’s not possible rather than such a small image so I preassumed you were a part of that category. Sorry about that! This workaround is also only possible due to the nature of your widget (ie. no content)
Please open the hero widget on the first review page and remove the hero widgets height – which is under the design and layout settings group. How does that look? Basically, that setting enforces a height which, in combination aforementioned CSS aspect ratio “feature” this can cause cropping as the widget can’t resize itself.
Hi Alex,
Again thank you. "SiteOrigin layout slider" is where I have added the background image. The only height I see is the "Heading size" I tried removing the height and saving it but did not make ay difference. is that the right place to do that.
Hi Bhanur,
It’s in the Design and Layout settings group.
Hi Alex,
I have height is “0” in that. But it did not help. but I added SiteOrigin slider and that does not crop the image in the responsive mode. But your suggestion is very good to reduce the width of the image so that it is not very small. Is therea any recommended size you would suggest.
Regards
Hi Bhanur,
To clarify, 0 isn’t the same as blank. Please blank the height so it’s empty. The SiteOrigin Slider worked as desired as that widget doesn’t have a height setting (thus you cannot enforce a height – it’s always responsive).
There is no recommended size just as long as you’re happy with resizing. Your best bet would be to experiment to find a sizing your happy with on both mobile and desktop.
Hi Alex,
Appreciate your help. I tried adding “0” and also leaving it blank but unfortunately it didn’t work for me in responsive view so I changed the SiteOrigin slider and that works.
Thank you very much for all your help.
Regards
Hi Alex,
I have another question regarding SiteOrigin social media icon. Can I add customized icon for the different social media. will appreciate your help.
Regards
Hi Bhanur,
That’s odd – that’s all that needs to be done to ensure it’s more responsive. Oh well, if you’re happy with the slider widget I guess there’s no reason to worry about it.
Unfortunately, you cannot add customized icons via the social media widget at this time. I’ll log it as a feature request – hopefully it’ll be added in a future update.