In smart slider

In smart slider in the slide called condo I'm trying to put the logo & text on slide number 1 .I'm having trouble putting it nicely on the mobile phone view could you please take a look and see if it's fixable

  • Adam Czajczyk
    • Support Gorilla

    Hi MOSHE

    I hope you're well today and thank you for your question!

    I didn't use this particular slider before but according to its docs, if I understand correctly, it should be able to resize content automatically according to the viewport size. I did try to set that up but some parts were still not resized actually and I didn't find the solution to this using only available options.

    There is, however, a mention in docs that in some cases fonts might not be resized so that might be the case. Since I'm not much familiar with this slider, it might be better to ask this slider's (or theme's if it's a part of the theme) developers for some additional help but if you need it solved fast, I came up with a small CSS workaround.

    It's not very "elegant" but when tested in browser seems to be doing the trick. You could add this CSS to your site's custom CSS (e.g. via "Appearance -> Customize -> Additional CSS" option or some "custom css" option of the theme, if there is any):

    @media only screen and (max-width: 840px) {
      .n2-ss-section-main-content {
    	   padding-top:9rem!important;
      }
      #n2-ss-2item2 {
    	 font-size:250%!important;
      }
      .n2-ss-item-content p {
    	 font-size:200%!important;
      }
    }

    It would only address screens smaller than 840 pixels of width and would simply move entire "logo/slogan" block down a bit and make text smaller so they'd fit-in the screen.

    Give it a try (make sure to clear all cache on site after adding CSS as otherwise you might not see the difference) and see if that helps.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello MOSHE

    Where exactly area you trying to add this?

    There's no errors in this CSS at all, it's just not quite "elegant" - the "!important" flag is sometimes considered as a bug/error as it's something that actually should be avoided but it certainly is not an error.

    If you're getting the message that this can't be saved, it might be better to put it in some different place. For example, if you're trying to add it to some custom css option in slider, it might be filtering the CSS to validate it to allow only certain, very specific syntax/rules.

    If you're adding that via "Appearance -> Customize -> Additional CSS", it should be added without issues.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.