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 slider, not all images are responsive on a mobile

Resolved 4 replies pluginplugin-page-builderpremium
[email protected]
10 years ago · Last reply by mikeys4u 10 years ago

Hi there,
I have the Hero Slider which is great however the first image I have is responsive and reduces down well on a mobile device but the second doesn’t – it shows up as huge and very zoomed in.
You wouldn’t have any initial thoughts as to why that could happen?
Thanks
Tim

URL: https://fivepansies.co.uk/

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

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 10 years, 3 months ago

    Hi Tim

    Thanks for reaching out.

    In the second slide you’ve used inline CSS to add padding to each paragraph. Ideally you need to use a class for each paragraph and then use Custom CSS so you can drop the padding on smaller screens.

    <p class="450-padding">Content

    And then at Appearance > Custom CSS”

    @media (min-width: 1024px) {
.450-padding { padding-left: 450px; }
}
  2. [email protected] 10 years, 3 months ago

    Thanks Andrew, that seems to have been the problem, I have deleted the text now and the associated inline CSS.

  3. Andrew Misplon Staff 10 years, 3 months ago

    Glad to hear you’ve made progress :)

  4. mikeys4u 10 years, 1 month ago

    Do remember that you can’t/should not start css class selectors with numbers…

    “”In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.””
    W3C Specification

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