Template Banner not optimized for Mobile View

Solved10 replies3 participantsUpdated by Eva Kemp

  • Avatar: vulcansg
    vulcansg
    Participant

    Hi guys!

    I have noticed a problem on the mobile view for the legenda template that I’m currently using. It seems that the banner is not optimized for mobile.

    How do I?:

    1) Adjust the appearance (size of the banner) on mobile view?

    2) Remove or adjust boxes sizes ((1)The Trend setter & (2) Free Registered Shipping) as seen on my website http://www.vulcan.com.sg

    3) Adjust between carousell (Featured products and Latest products)

    4) Lastly, how do I check my theme and woo commerce version?

    Thank you in advance for your assistance 🙂

    #66231 Copied Theme version: Legenda

    10 Answers

    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    1. You can change banner size using this code in custom.css file:

    @media (max-width: 480px) { .banner.hover-zoom img {
  height: 150px;
}}

    2. To remove banners use this code in custom.css file:

    @media (max-width: 480px) { .banner {
 display: none;
}}

    3. To remove space between 2 products sliders use this code:

    @media (max-width: 480px) { .vc_custom_1398413457173 {
    margin-bottom: 0px !important;
}
.slider-container, .items-slider {
 margin-bottom: -50px !important;
}}

    4. You can check theme version in Appearance > Themes > open theme details. To see Woocommerce version go to Plugins section in wp-admin panel and find Woocommerce plugin there.

    Regards,
    Eva Kemp.

    #66259 Copied
    Avatar: vulcansg
    vulcansg
    Participant

    Hi Eva,

    Thanks for the quick reply and the resource for changing and remove the banner. But my concern is still the button (All features & Categories) within the banner. How do I remove the buttons for mobile view!

    Thanks,
    Roz

    #66640 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    Are you talking about buttons “All features & Categories” in the slider?
    If so you can hide them with this code in custom.css file:

    @media (max-width: 480px) {.tp-caption.subtitle_seagreen2, .tp-caption.black, .black, .tp-caption.text_white {
  display: none !important;
}}

    Regards,
    Eva Kemp.

    #66695 Copied
    Avatar: vulcansg
    vulcansg
    Participant

    Hi Eva,

    Thanks but the code (for #66695) won’t work 🙁

    Also, How do I change the slider size on Mobile view?

    Hear from you soon!

    Cheers,
    Roz

    #67196 Copied
    Avatar: stan
    Stan Russell
    Participant

    Hello,

    please provide us with admin credentials for your site in private content.
    You can set Revolution slider size for any mobile resolution in Dashboard > Revolution Slider > Main slider settings > set Slider Layout to ‘Custom’ and specify Responsive Sizes as you want:

    Regards,
    Stan Russell.

    #67206 Copied
    Avatar: vulcansg
    vulcansg
    Participant

    Hi Stan,

    Please see private content.

    Thank you!

    Please, contact administrator
    for this information.
    #67262 Copied
    Avatar: vulcansg
    vulcansg
    Participant

    Hi,

    I have followed the steps as instructed but I can only change the width and not the height of the slider.

    Regards,
    Roz

    #67263 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    The previous code didn’t work because you forgot to add } in the code before. I’ve added it and the buttons aren’t shown now.
    Please check.
    To change slider height on mobiles add this code in custom.css file:

    @media (max-width: 480px) {.rev_slider_wrapper, .fullwidthbanner-container .fullwidthabanner {
 height: 150px !important;
}}

    Regards,
    Eva Kemp.

    #67312 Copied
    Avatar: vulcansg
    vulcansg
    Participant

    Hi Eva,

    Thank you! It worked 🙂

    Cheers,
    Roz

    #67723 Copied
    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

    #67786 Copied

The issue related to '‘Template Banner not optimized for Mobile View’' has been successfully resolved, and the topic is now closed for further responses