Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 18, 2017 at 11:11 am #795791
    dinamosrl

    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

    May 18, 2017 at 7:28 pm #796102
    Victoria

    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

    May 19, 2017 at 3:10 pm #796610
    dinamosrl

    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

    May 20, 2017 at 5:28 am #796915
    Rikard

    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

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