This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Hero Image mobile responsive text

Resolved 7 replies pluginplugin-widgets-bundletechnical
PSBakh
9 years ago · Last reply by PSBakh 9 years ago

Hi guys,

Quick question re: Hero Image widget.

As far as I am aware, this widget is not built to be responsive to mobile screens.
However, is there anything I can do to at least adjust the text size in mobile mode, so it doesn’t run off the edge of my banners?

Thank you!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff 9 years, 8 months ago

    Hi PSBakh,

    The hero widget is responsive, but only as responsive as automation will allow us. We’re able to further refine the responsiveness of a hero widget. If you would like my help with this could you please provide me with a link to the hero widget you’re having issues with? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    The best thing you can do for automated responsiveness is to remove any height you’ve set in the widget, use little padding and use the themes font sizes rather than a custom one (your theme will handle making the text responsive).

  2. PSBakh 9 years, 8 months ago

    Hi Alex,
    Thanks for your reply. The site im working on is currently down for maintenance, can I create a temporary user for you to be able to have a look?

  3. Alex S Private Staff 9 years, 8 months ago

    This is a private message.

  4. WordPress Private 9 years, 8 months ago

    This is a private message.

  5. PSBakh 9 years, 8 months ago

    Hi Alex,
    Just set up a temporary user for you.

    The hero slider on the homepage is the one I am having most issues with.

    Thank you for your help!

  6. Alex S Staff 9 years, 8 months ago

    Preface: This CSS was written for PSBakh. It will not work on any other site but his. I’ve made this response public for reference – nothing more.

    Hi PSBakh,

    If you navigate to WP AdminAppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS before any other CSS related to the homepage widget in your CSS. (specifically in the /*Homepage Hero text*/ section)

    @media (max-width: 810px){
	.homepage-hero h1 {
		font-size: 40px !important;
	}
	.homepage-hero h3 {
		font-size: 25px !important;
	}
	.homepage-hero .so-widget-sow-button {
		margin-top: 5px !important;
	}
}
@media (max-width: 600px){
	.homepage-hero .sow-slider-image-wrapper {
		margin: 0 !important;
	}
	.homepage-hero .sow-slider-image,
	.homepage-hero .sow-slider-image-wrapper {
		height: 400px !important;
	}
}

    You might also need to install the SiteOrigin CSS Editor.

  7. PSBakh 9 years, 8 months ago

    Amazing! Works perfectly. Thank you so much for your help, Alex!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread