Mobile Version Text Format

[danny]

Dear @Richard,

I'm using the desktop version of http://testshila.de/onepage/ for the mobile version, which works well.

Is it possible to only change the text format for the mobile version? As the breaking point is 0 the mobile text format doesn't apply.

Thanks and best wishes,
Daniel

[Richard]

Dear Daniel

@danny

Do you only use the one text format for all content or do you have multiple? ( excluding menu-items - i see they are different )

Talk soon & best wishes

Richard

[danny]

Dear @Richard,

thanks, it's a bit in the air for now )). But more likely I'll use multiple text formats.

Thanks & best wishes

Daniel

[Richard]

Dear Daniel

@danny

When the time comes you can set those text formats to change on Mobile even if you have a 0 breakpoint Mobile Layout.

Text formats can be given a Class, then using some Custom CSS you can change them:

---

Best wishes 🌞

Richard

[danny]

Dear @Richard,

thanks for this. Would you mind to provide me with the Custom CSS?

Thanks and best wishes,

Daniel

[danny]

Dear @Richard,

I tried Custom CSS, but unfortunalty I didn't worked.

Could you help out?

Thanks and best wishes

Daniel

[Richard]

Dear Daniel

@danny

Very close 🌝

._Default{
font-size:6px;
}

https://www.w3schools.com/cssref/pr_font_font-size.asp

---

Now the trick is how to apply it only on mobile even though you have set no mobile breakpoint for the CSS to apply to?

A: We can use a 'Media Query'

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media only screen and (max-width: 600px) {
     ._Default{
    font-size:6px;
    }
}

The above says:
For a screen 600px and under - Apply the following CSS Rules - Class: _Default now gets a font-size of 6px.

In some cases you may need to apply the term !important
to override any CSS that has already been set that may interfere. !important will always take precedence. However use it sparingly as a rule.

@media only screen and (max-width: 600px) {
     ._Default{
    font-size:6px !important;
    }
}

---

Hope this helps Daniel and best wishes ✨

Richard

[danny]

Dear @Richard,

thanks so much, works great!!

Would it be possible that you have a look at my other questions on the Lightbox Captions (http://laythemeforum.com:4567/topic/6880/lightbox-caption-alignment)

and the size and colour of the menu points?

http://laythemeforum.com:4567/topic/6872/different-font-for-each-menu-point

Thanks again.

It is really fun to work with the theme,

Best wishes and a nice day,

Daniel

[danny]

Dear @Richard,

I'm trying to tackle the Mobile Menu Size, but I guess my Custom CSS is wrong, at least it doesn't work.

Could you help out?

I did this:

Thanks again!

All best and have a nice day ))

Daniel

[Richard]

Dear Daniel

@danny

You can declare your CSS rules within one 'media query'. You do not need to make muiltiple - E.g:

@media only screen and (max-width: 600px) {
     ._default{
             font-size:10px;
     }

     .Menu{
             font-size:8px !important;
     } 
}

Please note, respectfully Daniel that if you wish to go deeper into customising Lay theme it is up to you to research how Basic CSS and HTML function, i am unfortunately unable to maintain a tutorial like this even though i wish to help.

Have a wonderful day Daniel and thank you for supporting Lay theme.

---

Best

Richard

[danny]

Dear @Richard,

thanks a lot! And I totally understand. Unfortunalty the Menu-Size for mobil doesn't work but I will try to find out.

Have a nice day and thanks again,

Best

Daniel