Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #272537

    Hello All!

    I’m trying to get different font sizing for desktop and mobile for the ‘text block’ content element.

    I’ve found the custom.css with the @media query for mobile and desktop. I’ve try a few different things such as custom classes to generate different font-family/font-size/etc, but that doesn’t seem to work. Also, I’ve tried to use a .mobile-only and .desktop-only class to hide content for the respective text blocks.

    Here is the snippet from my mobile portion:
    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .mobile-only {
    display:block !important;
    }
    .p1customMobile {
    font-family: georgia;
    font-size: 20px;
    line-height: 40px;
    }
    }

    Any advice/help would be most appreciated!

    #272552

    Hi!

    Are this classes mobile-only / desktop-only being declared in the content?

    Regarding the other rule, try targeting the p elements of p1customMobile:

    .p1customMobile p{
    ..
    }

    Regards,
    Josue

    #272560

    Hi Josue,

    I believe the targeting of the p elements worked! Thanks.

    Yes, I set up a test text with the mobile-only/desktop-only:
    <div class=”mobile-only”> Test Text </div>
    <div class=”desktop-only”> Test Text2 </div>
    Both of those showed up for both mobile and desktop.

    #272565

    Can you post a link to the page where you are doing these tests?

    #272585

    http://ehc.english.ucsb.edu/

    Its the first text block

    #272596

    The problem is that dekstop-only is inside mobile-only, they should be siblings (same level):
    (Purchase code hidden if logged out) /00000313.png” alt=”” />

    And you’d need to hide the mobile-only on desktops like:

    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
    	.desktop-only {
    		display: block !important;
    	}
    	.mobile-only {
    		display: none !important;
    	}
    }
    @media only screen and (max-width: 768px) {
      /* Add your Mobile Styles here */
    	.desktop-only {
    		display: none !important;
    	}
    	.mobile-only {
    		display: block !important;
    	}
    }
    

    Makes sense?

    Cheers!
    Josue

    #273026

    Yes! Thank you, that made perfect sense and I got it to work now.

    However, I seem to have run into a new issue. When I try to edit the text block from the dashboard, it just shows up blank. I can post an image if it helps clarify things, I just don’t know how to post it.

    Thank you again.

    #273030

    Hi!

    You can upload it to a service like imgur o dropbox.

    Make sure you are using the latest version of Enfold(2.8.1)/WordPress (3.9.1). Right now you are using Enfold 2.7, follow this guide on how to update it.

    Best regards,
    Josue

    #911885

    HI there,

    I want to larger my footer socket on the mobil version. The Quick CSS code is:

    #socket .container {
    padding-top: 10px;
    padding-bottom: 50px;
    }

    But how can I just change it at the mobil version?

    Best,
    Paul

    #912093

    Hi,
    If I understand correctly, this is the code you want to use for your site at mobile size, To make a code only target your site in mobile please add your code to this code:

    @media only screen and (max-width: 767px) { 
    /*your code here*/
    }

    So it would look like this:

    @media only screen and (max-width: 767px) { 
    #socket .container {
    padding-top: 10px;
    padding-bottom: 50px;
    }
    }

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.