Styles differ in editor view compared to browser view V2

Support
#1

Hi there

unfortunately my last post was closed as I have been on holidays.

I have some trouble with some text display. They look different. I want to display lato font but this doesnt work. The background color of the gaps below are not displayed.

I would be very happy if you can help me out.

Best,

Lorenz

#2

Hello Lorenz,

Thanks for writing in!

Lato font comes built into theme font manager. I see that you are using a custom font for lato in font manager. Further I created a test page and in that I added a text element. I then applied the font template you created and also Lato font that comes with font manger.

I can see the changes getting applied over there.

Can you please elaborate and please share the exact page URL where I can see the issue along with some screenshots?

Thanks.

#3

Hello

Thank you a lot for your reply.
In the end the lato font should be displayed everywhere. I had feedback that the font was not displayed as it should be, but partly in times new roman, partly in black. So I tried to fix it in severel ways but it never worked.

Here are some samples how it should look like:

Also, I have some trouble with following:

  1. In mobile view, the heading is cut, this should not be:

  1. The navigation bar in mobile view should be fixed on top (top height is set to 90), but it is not. Why?
  2. Slider Revolution: Since today, some images are not showing anymore (“ONE” and “Skills for Agrofood Innovation”)
  3. Mobile menu: “Hintergrund” is not working. Why?

I would be very happy if you can help me.
Thanks and best,

Lorenz

#4

Hi Lorenz,

Thanks for reaching out.

The Lato font is by default should be rendered on the theme, and this CSS shouldn’t be added since font-family: "lato light" !important; is not correct.

.lauftext4 {
    font-size: 120%;
    font-family: "lato light" !important;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    list-style-type: circle;
}

And the reason it’s not working is that a custom font is applied for Lato font template.

It is supposed to be Lato font like this

Lato font is a google font and doesn’t need to be a custom one. You can go to your font settings by clicking the cog icon within Theme Options or builder.

And for other issues/question

  1. Please use responsive text feature like from here https://theme.co/apex/forum/t/site-not-responsive-on-mobile-devices/63684/2. Your texts are big and it’s will not automatically respond, the responsiveness for each text should be configured accordingly.

This would help too https://theme.co/apex/forums/topic/responsive-text-how-to/, it’s old but the implementation should still the same. The only difference is the UI.

  1. It’s not, navigation is not fixed on top by design for mobile. If it’s fixed and the menu tends to be taller than your screen then the user will not able to access other items outside the screen view since it follows as you scroll. Still, you can apply fixed on top by adding this CSS to Theme Options > CSS 
    .x-navbar-fixed-top {
     position: fixed !important;
     top: 0;
     width: 100%;
    }
  1. The images seem to be deleted, please upload your images again and apply them to your slider.

  1. You have two sections that uses the same ID hintergrund, ID is unique and should only exist once on same page. What I can recommend is only use one section with the ID hintergrund, then separate your contents (desktop/mobile) with rows. You can use the same Hide during breakpoints option for rows.

Thanks and I hope I able to help you with this :slight_smile:

#5

Thank you so much! Your support is really great! Keep it up!

Now I have some last questions:

  1. In section “HINTERGRUND” there are two red boxes, the first one looks like it should be, see image below. I added an inline border to the class “bgimg” (class is assigned to section “Ziel 1 (>768px)”)

Unfortunately this is not working with the second box:

I also added the class “bgimg” to section “Ziel 2 (>768px)”. Why is this not working?

  1. I have added a gap between section “Konzept” and section "Ziel 1 (>768px) in order to ger around the problem with the two IDs (“Hintergrund”). How can I customize it? E.g., changing background color and height.

  2. Is it possible to get the same height for the two boxes?

  3. The section “Studienformate” is showing up in the mobile preview of the edtior but not on mobile devices. Why?

Thank you very much again!

Best,

Lorenz

#6

Hi Lorenz,

  1. It’s a glitch with outline styling, try adding another section below it and it will work. Please use box-shadow, example
.bgimg {
    -webkit-box-shadow: inset 0px -100px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px -100px 0px 0px rgba(255,255,255,1);
    box-shadow: inset 0px -100px 0px 0px rgba(255,255,255,1);
}

  1. You’re correct for changing it’s background, it’s not just taking effect because of added height: 10px; to inline CSS. Please remove that and use the padding option to increase its height, the background will be then visible and height is defined by the padding.

  2. It’s only possible with margin-less column and by adding the background color to the column itelf. Please inspect your row and enable this option

Then inspect your columns and change their backgrounds. The column heights are equal, adding the background there will make the box appears equal too. The downside, there will be no gap in between, perhaps you can add empty column in between and set its width accordingly with custom CSS.

  1. There is a broken content from your page and it causes other structure to shift under other structures. Example, the second section appears under section which shouldn’t, it’s only the rows should be under the section. It works on the preview builder since each element has its own preview isolated from other elements.

Please check these other threads, this should help you finding the culprit :slight_smile:
https://theme.co/apex/forum/t/very-strange-error-in-pro/52579/8,
https://theme.co/apex/forum/t/glitch-in-cornerstone-column-width/54003/2,

Thanks!

#7

Hi Rad,

perfect, thank you so much!
Everything fixed now, I hope :slight_smile:

Best,

Lorenz

#8

You’re welcome!
We’re glad @Rad were able to help you out.

#9

sorry to reopen the topic, but the fonts are not displayed correctly everywhere. The font of the Slide In (Convert Plus) shows the wrong font. Gravity forms is embedded into the Slide In if that helps. I have reports that the browser shows Edge Times New Roman instead of Lato.
Unfortunately I don’t know what to do anymore and I am getting trouble as of this issue. I hope you can help me out.

Best
Lorenz

#10

Hey Lorenz,

Are you referring to the boxed area in the screenshot below?

The font family you’re using for that area is lato light which is incorrect as pointed out by Rad earlier. Please remove or change it to the correct font family.

Hope that helps.

#11

Oh no, I’ve overlooked that, sorry!
Now it is working.

And thanks again for your great support and patience :slight_smile:

Lorenz

#12

No worries, Lorenz. We’re happy to help. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.