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].
Using SiteOrigin widgets I have a row with 2 columns at the top of a page. The row is divided in 33.6 and 66.7 pixel sections. The section on the left is the smaller and shows and image. The section on the right is text. On the iPad, in portrait mode, the image is at the top of the page on the left, with a large black – a little more than half the page – to the right. The text appears underneath. I understand that a redesign is necessary for mobile devices, but how can I keep the image to the correct size without a black area next to it? The page can be viewed here: http://digitalquinn.com/coppereflections/copper-patina/
Note, the problem only occurs on mobile devices in portrait mode.
Hi Linda,
This is happening as a result of the image not being full width.
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:.
@media (max-width: 780px){ .widget_media_image img { width: 100%; } }You might also need to install the SiteOrigin CSS Editor.
Thank you – this fixed the problem. A question, how did you figure the 780px number. There is also a very thin black band at the bottom of the image. Is there a way I can also fill the space with 100% height? I tried adding height: 100%; but it did not change anything. Thanks for your help.
Hi Linda,
780px is the default mobile width used by SiteOrigin Page Builder (this can be adjusted by navigating to WP AdminSettingsPage Builder, open the Layout tab and adjust the Mobile Width). I would recommend using something larger than 768 as that the width that iPads display and maybe even larger than 800px as that is the typical width used by Samsung tablets (reference) but they’re less of a concern due to the larger size.
As for the line, please add the following CSS to WP AdminAppearanceCustom CSS:
.widget_media_image { line-height: 0; }