Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 26, 2015 at 1:49 pm #402644
    Me.llamo

    Hey,

    I would like to make the font-size (now 19px) smaller for tablet and mobile phone, but will not respond at this code:

    @media only screen and (max-width: 767px) {
    .page-id-362 #av_section_1 .avia_textblock {
    font-size: 15px !important;
    }
    )

    I need a little help…thanks!

    • This topic was modified 9 years, 9 months ago by Me.llamo. Reason: added which page it involves
    February 26, 2015 at 2:30 pm #402666
    begrafiks

    Hi me.Ilamo;
    I think there is a small but important mistake in your code.
    It should end with “}” not “)”.

    February 27, 2015 at 5:12 am #403158
    Rikard

    Hey!

    Is the page ID correct? The link you provided goes to a 404 page so I wasn’t able to check. But like @begrafiks wrote, replace the ) with a }, otherwise you’re not closing the media query.

    Best regards,
    Rikard

    February 27, 2015 at 1:02 pm #403371
    Me.llamo

    Hey guys,

    Sorry, I copied & paste the code and had some coding removed but I did it too thorough….

    Here is the code once again and set the page to public again (issue is first code):

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .page-id-362 #av_section_1 .avia_textblock {
    font-size: 15px !important;
    }
    .page-id-407 #av_section_3 .avia_textblock {
    margin-left: -91px !important;
    width: 130% !important;
    }
    }

    March 1, 2015 at 9:09 am #404047
    Ismael

    Hey!

    Replace the code with this:

    .page-id-362 #av_section_1 .avia_textblock > * {
font-size: 15px !important;
}

    Cheers!
    Ismael

    March 1, 2015 at 7:45 pm #404165
    Me.llamo

    Thank you! Can you please explain in short what > * does?

    I hoped that the ugly breakup of the sentences would disapear, but it doesn’t.
    Is there a way to fix this?

    March 2, 2015 at 5:12 pm #404578
    Yigit

    Hey!

    Please try the code as following as well

    .page-id-362 #av_section_1 .avia_textblock * {
font-size: 15px !important;
}

    If that does not help, can you please post a screenshot and show the changes you would like to make so we can make sure that we are on the same page? You can upload your screenshots on imgur.com or Dropbox public folder.
    * is called wildcard character. 

    .your-class h1 { font-size: 12px; } /* it would change the font size of h1 element inside your-class */
.your-class h2 { font-size: 12px; } /* it would change the font size of h2 element inside your-class */
.your-class * { font-size: 12px; } /* it would change the font size of both elements inside your-class */

    Regards,
    Yigit

    March 9, 2015 at 3:10 pm #408133
    Me.llamo
    This reply has been marked as private.
    March 10, 2015 at 5:09 pm #408942
    Elliott

    Hi!

    It’s because your adding the line breaks in manually. Instead I think what your wanting to do is remove those and set a max width to the H3 heading like so.

    <h3 style = "max-width: 300px; margin: 0px auto;">

    That will keep the lines looking nice on the full desktop screen but let them break normally on smaller mobile screens.

    Cheers!
    Elliott

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