Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #795791

    Hi, Ive got an issue applying custom styling for tablets with the enfold template.

    Currently when viewing my site on desktop and mobile everything is aligned right. But when i go below 960px wide the 3 headers on my hompage push their respective image and text further down, disaligning everything on the page.

    I thought to resolve the issue to apply a custom font-size to the heading text only for tablets, such as reduceing the font-size to 16px only for tablets. Anybody have an idea how to do this? Or is there an alternative solution?

    Thanks in advance.

    R

    #796102

    Hey dinamosrl,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 960px) {
    
    .post-entry-734 h3 {
      font-size: 18px;
    }
    div .av_one_third {
          width: 38%;
    }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #796610

    Hi Victoria,

    Sadly the suggested edit neither in the quick Css nor in the custom.css file works. I have disactivated my caching and cleared it. tried numerous ways to fix it. What im trying to do is to align the 3 columns with eachother. I thought it could be done by resizing the h3 tags to an appropiate font-size so that they align. But when inserting the code for @media query it doesnt take any effect across tablets and mobiles below 767px….

    below i pasted the css i put into the custom.css file:

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .avia_textblock h3 {
    font-size: small;
    }
    }

    Need urgent help.

    Thanks in advance,

    Rudolf

    #796915

    Hi,

    Please try this in Quick CSS instead, as your custom.css file might be cached:

    @media only screen and (max-width: 960px) {
      .post-entry-734 h3 {
          font-size: 18px !important;
      }
      div .av_one_third {
          width: 38% !important;
      }
    }

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.