[Support request] Mobile view – Header and home picture cover

[Pietro]

I there, I face to a complicate problem (for my knowledge of the tools) with my site:
I the mobile view (phone mobile) I would like fix the header with the site name in 1st line and the icon of menu (3 lines) in second line. Obviously centered.
Possibly, I would like to change the color of the header (in this mobile view) for background and text.

In my home I use a picture full width with a box of text (in Desktop version) but in mobile view I would like use just the photo (and visible).

Is it too much complicate? I hope no.
Is it possible to do something to solve these?

Many thanks in advance for your support.

P

[Ying]

Hi Pietro,

You site can’t be reached at this moment, I’m not able to see it, could you double check?
Thanks!

[Pietro]

Hi Ying,
I can see it as usual, no problem

[Ying]

fix the header with the site name in 1st line and the icon of menu (3 lines) in second line.

Try this CSS:

@media (max-width: 768px) {
    .inside-navigation {
        flex-direction: column;
    }
    .navigation-branding {
        margin-left: auto;
    }
}

in mobile view I would like use just the photo (and visible).

Try to follow the steps:
1) Go to the GB Container, select the H2 Headline block, add an additional CSS class to it: hide-on-mobile, do the same to the Buttons block.
https://docs.generateblocks.com/article/buttons-overview/#additional-css-classes

2) Add this CSS:

@media (max-width: 768px) {
    .gb-container-fc0232f3 {
        background-position: 87% 0%;
        background-size: auto;
        background-color: transparent;
    }
}

Let me know 🙂

[Pietro]

Hi Ying,
thanks for your reply but I’m not sure to understand.

I applied the CSS for the 1st point and the final result seems ok just on my Mac (switching in mobile view), on my iphone nothing change (how can I send you the picture of the view?).

For the 2nd point, I’m sorry but I don’t understand where I have to put the CSS.
I’m sorry, unfortunately I’m not so expert.

Many thanks again for your support.

P

[Ying]

Hi Pietro,

I don’t see codes have been added to your site yet, could you disable cache plugin and clear cache.
https://www.screencast.com/t/R71OuJjD

All the CSS could be added in Customizer > Additional CSS.

[Pietro]

Hi Ying,
I removed the CSS after the test, now it’s in.
It’s seems working!! (obviously 😉 )
Now, how can I modify the color of background and the text color (just for mobile view)?

Again, what about the view of the picture of cover on home page?

Thanks a lot
P

[Pietro]

Hi Ying,
Update: Probably I’m wromging something but I insert the CSS as per your suggestion but nothing change on mobile …

P

[Ying]

I checked your site, so the header on mobile has been working now.

For the page hero, you haven’t done the 1st step, so the CSS won’t work.
Just to make sure, you don’t want the text only the background image on mobile for page hero?

If so, do the following 2 steps:

1) Go to your home page editor, select the H2 Headline block (Far crescere il patrimonio con il controllo del rischio e dei costi SCOPRI COME), add an Additional CSS class to it: hide-on-mobile, do the same to the Buttons block. For how to add css class, read the article below.
https://docs.generateblocks.com/article/buttons-overview/#additional-css-classes

2) Then add this CSS:

@media (max-width: 768px) {
    .gb-container-fc0232f3 {
        background-position: 87% 0%;
        background-size: auto;
        background-color: transparent;
    }
}

[Pietro]

Hi Ying,
I changed something: now I use Elements (Home Header) …
It’s work partially, now I have the problem of the picture (my face is out of the scree on mobile) and I would like change the style of the button.

I have the problem of the style of the header in mobile view: I would like to have 1st line in blue light color with the text in withe and the 2nd line so as is (withe).

What can I do to fix this topics?
Many thanks in advance for your patient support 🙂
P

[Ying]

Hi Pietro,

Why use header element while your home page is a static page? I think your original way is a better solution.

I remember you set a negative top margin to that container, remove that negative top margin, create a header element assigned to Front page, nothing needs to be set or changed except chose merge under site header tab.

Then we can help with the background image position. 🙂

Let me know if there’s anything unclear.

[Pietro]

Hi Ying,
may thank for your support; obviously your suggestion works correctly 😉
Now I would resolve the question about my picture out of the mobile screen.

May you help me?

Thank again
P

[Ying]

Yes, of course 🙂

You’ll need to shrink the font size of the text and buttons for mobile, GB headline and buttons block allow you set different font size for different devices by clicking on the devices’ icon.

If you can’t adjust the mobile font size for the orange text, try to replace it with GB headline as well.

After you finish adjusting the text font size, you could give this CSS a try, feel free to change numbers to find the best fit:

@media (max-width: 768px) {
.gb-container-33080d8e {
    background-position: 81% 10%;
        background-size: auto;
    }
}

[Pietro]

Great!!
You’re simply great!!! 🙂

Now I’ll try to find the right combination of font and number in the CSS.

Just a last thing (simple, I think, for you): now I have a bar of the site title e the menu too much hight; is it possible to reduce the dimension of that?
My I modify the style (background of the site name color xxx and background of the menu color yyy)?

Thanks again super Ying 🙂
P

[Ying]

I see you’ve added the CSS I provided in my last reply to the additional class field of page editor, that’s not the correct place, please remove that.

Add the CSS in Customizer > Additional CSS.
https://www.screencast.com/t/BOyGAHS2d2

For the mobile site title, try this CSS, feel free to change the 50px.

@media (max-width: 768px) {
    .navigation-branding .main-title {
        line-height: 50px;
    }
}

For the background color and text color, are you only want to change them in mobile or in general?

Let me know 🙂

[Author]

Posts