Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 30, 2014 at 7:19 pm #272537
    kenhiltner

    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!

    May 30, 2014 at 7:53 pm #272552
    Josue

    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

    May 30, 2014 at 8:09 pm #272560
    kenhiltner

    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.

    May 30, 2014 at 8:20 pm #272565
    Josue

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

    May 30, 2014 at 9:17 pm #272585
    kenhiltner

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

    Its the first text block

    May 30, 2014 at 9:47 pm #272596
    Josue

    The problem is that dekstop-only is inside mobile-only, they should be siblings (same level):

    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

    June 1, 2014 at 9:07 pm #273026
    kenhiltner

    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.

    June 1, 2014 at 9:43 pm #273030
    Josue

    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

    February 13, 2018 at 8:30 pm #911885
    teamazing

    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

    February 14, 2018 at 4:51 am #912093
    Mike

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.