[Resolved] the text in the top bar has been deconfigured

[Ivan]

Hey,

Recently the text in the top bar has been deconfigured.
Before the mobile and the email were on the same line, but now the email has dropped on the second line.
I have tried to modify it with marjenes, but nothing, I have not been able to fix it using the CSS code I have either.
The web is https://emcolimpiezas.es
Below I show you the image and the CSS code:https://www.screencast.com/t/eklZDCI59

”
<i class=”fas fa-phone-square-alt “></i>  678 83 22 02
       
<i class=”fas fa-envelope”></i>  info@emcolimpiezas.es
”

Can you help me?

Thank you,
Ivan.

[David]

Hi there,

in Customizer > Layout > Top Bar – try reducing the Left and Right Padding to give the top bar more space.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

I just did it, but nothing has changed

[Leo]

Have you fixed this?

I just tested using the browser simulator tool for iPhone 6/7/8 and this is what I’m seeing:
https://www.screencast.com/t/Fv4MjX9Fxy

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

I am using Xiaomi Mi A2 and I get the following:
https://www.screencast.com/t/bTngBrRqq
I have tried with BQ Aquiarius and it comes out the same …

However with Xiaomi 8 Pro it shows itself well.

It’s supposed to be responsive..

[Ying]

Hi Ivan,

I think the issue is coming from the narrower mobile screen.

Your current padding left and padding right are both set to 30px in mobile view, could you try to set them to 10px, see if it works.

Let me know 🙂

[Ivan]

Hi,
In Customize> Layout> Top Bar – I have reduced the Left and Right padding to 10, but the result is the same. I have also tried other numbers but there is no effect.

Can Top Bar fail? In the rest of the pages the phone icon and the envelope icon do not appear, when the CSS code is the same.

[Ying]

Hi Ivan,

Give this CSS a try:

@media (max-width: 768px) {
    .top-bar .inside-top-bar {
        padding-left: 10px;
        padding-right: 10px;
    }
}

For the icon doesn’t show issue, could you open a new topic? Thanks!

[Ivan]

Ok thanks, now yes.
Is it known why the padding is not applied from Customize?

[Ying]

I’ve made a note to look into this issue. Thanks!

[Ivan]

Ok Thx

[Author]

Posts