Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Mobile Version Text Format

Mobile Version Text Format

Scheduled Pinned Locked Moved General Discussion
11 Posts 2 Posters 208 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    danny
    wrote on last edited by
    #1

    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

    IMG_6133.PNG

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      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
      1 Reply Last reply
      0
      • D Offline
        D Offline
        danny
        wrote on last edited by
        #3

        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

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          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:
          Screen Shot 2021-05-19 at 1.47.39 PM.png


          Best wishes šŸŒž
          Richard
          1 Reply Last reply
          0
          • D Offline
            D Offline
            danny
            wrote on last edited by
            #5

            Dear @Richard,

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

            Thanks and best wishes,

            Daniel

            1 Reply Last reply
            0
            • D Offline
              D Offline
              danny
              wrote on last edited by
              #6

              Dear @Richard,

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

              Could you help out?

              Thanks and best wishes

              Daniel

              Bildschirmfoto 2021-05-20 um 11.12.14.png

              1 Reply Last reply
              0
              • RichardR Offline
                RichardR Offline
                Richard
                Global Moderator
                wrote on last edited by
                #7

                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
                1 Reply Last reply
                0
                • D Offline
                  D Offline
                  danny
                  wrote on last edited by
                  #8

                  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

                  1 Reply Last reply
                  0
                  • D Offline
                    D Offline
                    danny
                    wrote on last edited by
                    #9

                    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:

                    Bildschirmfoto 2021-05-21 um 21.09.30.png

                    Thanks again!

                    All best and have a nice day ))

                    Daniel

                    1 Reply Last reply
                    0
                    • RichardR Offline
                      RichardR Offline
                      Richard
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        danny
                        wrote on last edited by
                        #11

                        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

                        1 Reply Last reply
                        1
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        I also code custom websites or custom Lay features.
                        šŸ’æ Email me here: šŸ’æ
                        info@laytheme.com

                        Before you post:
                        1. When using a WordPress Cache plugin, disable it or clear your cache.
                        2. Update Lay Theme and all Lay Theme Addons
                        3. Disable all Plugins
                        4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                        This often solves issues you might run into

                        When you post:
                        1. Post a link to where the problem is
                        2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                        3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                        Online Users
                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                        laytheme.com
                        • Login

                        • Don't have an account? Register

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Search