Okay
  Public Ticket #2893474
Responsive Header
Open

Comments

  • Lucie started the conversation

    Hi, 

    I would like to make my header responsive as the template presentation.

    How can I do that ?

    Thanks

    Attached files:  Capture d’écran 2021-10-13 à 09.37.20.png
      Capture d’écran 2021-10-13 à 09.37.29.png

  •  1,647
    Support Agent 1 replied

    Hi,

    Could you please clarify in more detail what are you referring to? Are you referring to the background image or something else?


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Lucie replied

    Hi, 

    I'm referring to the text of my header, also the position of my background.

  •  1,647
    Support Agent 1 replied

    Hi Lucie,

    Regarding the background image,  unfortunately, it is not possible for the images to fully resize to fit the smaller screen sizes. You can re-center the existing images, so different parts of the image would be visible on mobile.

    Please try to do the following:

    - Add Extra Class Name to the section.

    7671543797.png

    - Then, add the following code to Appearance >Customize > Additional css:

    @media (max-width: 768px) {    
        .mysection {
        background-position: 0% 50% !important;
    }
    }

    Please adjust the break point (max width), and background position according to your needs.

    Regarding the Text on mobile, you can decrease the font size or change the position on the screen. Could you please tell us what you want to achieve on the mobile version with Text so we can send you proper instructions ( if it is possible)?



    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Lucie replied

    Thanks, for the text I would like to achieve the same result as the template.

    Attached files:  Capture d’écran 2021-10-13 à 09.37.29.png
      Capture d’écran 2021-10-13 à 09.37.20.png

  •  1,647
    Support Agent 1 replied

    Hi,

    In that case, you should create a new section or row with a different layout. In order to achieve this indent:

    8120820458.png

    You are using additional column but also different padding on columns with Header elements,

    6592843239.png
    2073398606.png

    so in a mobile version that layout is kept, so you should create totally different layout in order to achieve layout as on our demo (without indent). Also, we suggest you use spacing on section or Separator elements so the first Header element could be visible on the mobile version. 


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Lucie replied

    It works perfectly thank you !

  •  1,647
    Support Agent 1 replied

    Hi,

    You are welcome!


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!