Home Forums Themes Support Claue Hero banner not mobile responsive

Viewing 7 reply threads
  • Author
    Posts
    • #38586
      DonnaJacky
      Supported

      Dear,

      Last time the hero banner wasn’t mobile responsive and now we add another hero banner, but this one is also not mobile responsive. How can we make it responsive and make sure the next hero banners will be mobile responsive? Thanks!

      Attachments:
      You must be logged in to view attached files.
    • #38589
      Harry
      Supported

      Hi Jacky,

      The issue because you add padding top and padding bottom of and these value fixed while background cover content and when you view on mobile only the width decrease but the height still the same so you have to add code to decrease the height.

      Please add below code to Claue > Theme Option > General layout > Custom CSS

      @media only screen and (max-width: 767px) {
      .vc_custom_1600637582830 {
      	padding-top: 25vh !important;
      	padding-bottom: 5vh !important;
      }}

      We recommend just change the background image. Don’t delete the row wrap hero banner and create new row.

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • #38590
      DonnaJacky
      Supported

      Hi Harry,

      Thank you!

      I just added the code, but the hero banner isn’t changing.

    • #38591
      Harry
      Supported

      Hi Jacky,

      Please change code to

      @media only screen and (max-width: 767px) {
      .vc_row..vc_custom_1600637582830 {
      	padding-top: 25vh !important;
      	padding-bottom: 5vh !important;
      }}

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • #38594
      DonnaJacky
      Supported

      Dear Harry,

      Thank you.

      Maybe you can took a look, because it is still not working.

    • #38603
      Harry
      Supported

      I’m sorry again.

      The correct code is

      @media only screen and (max-width: 767px) {
      .vc_row.vc_custom_1600637582830 {
      	padding-top: 25vh !important;
      	padding-bottom: 5vh !important;
      }}

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    • #38624
      DonnaJacky
      Supported

      Dear Harry,

      Sorry to say, but this code isn’t also working 😔

    • #38625
      Harry
      Supported

      Hi Jacky,

      Please check the number https://prnt.sc/ulslw5 it different with old code https://prnt.sc/ulsmwz

      Please use the new on this topic.

      Kind regards

      Harry
      Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

Viewing 7 reply threads

You must be logged in to reply to this topic.