Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 4, 2016 at 9:23 pm #656756
    efletcher

    Hi,

    I picked up a tip from here regarding some quick css to ensure the special heading becomes responsive to avoid loss of text on mobile device. This seems to work well for the special heading but not the sub heading. Is there an extra bit of code I can add to reduce that too?

    Many Thanks
    Emma

    July 4, 2016 at 9:24 pm #656757
    efletcher

    Sorry this was the code I picked up which works well.

    @media only screen and (max-width: 767px) {
    h1.av-special-heading-tag { font-size: 20px !important; }}

    – Also is it possible to increase the size of the gap between the special heading and subheading? Or would it just be easier to create two separate headings?

    • This reply was modified 8 years, 4 months ago by efletcher.
    July 5, 2016 at 9:29 am #656909
    Rikard

    Hi Emma,

    Could you post a link to your site and point out the elements you would like to change please?

    Regards,
    Rikard

    July 5, 2016 at 10:47 am #656933
    efletcher

    Hi,
    Sorry that probably would have been helpful. Link to site is http://new.fcsafety.co.uk/

    The elements in question are on the header image at the top of the page, just under nav menu there is a special heading “Safety Training….” then “You know it makes sense….”. I have managed to reduce the safety training H1 but I would like to also reduce the you know it makes sense sub heading accordingly so it stays a relative size to the heading.

    I also would like to increase the padding between the heading and the subheading if this is possible?

    In addition I have 5 images in columns all with captions, starting with mechanical handling equipment. Ideally I would like the caption to be left aligned and at the top of the image.

    Thank you.

    July 5, 2016 at 12:03 pm #656962
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    To increase the gap between heading and subheading 

    .av-subheading_below {
    margin-top:150px!important;
}

    To align the captions in the image

    .av-image-caption-overlay p {
   text-align: left;
   margin-top: -70px!important;
}

    Let us know if you have more questions

    Best regards,
    Vinay

    July 5, 2016 at 12:15 pm #656972
    efletcher

    Hi Vinay,

    Thanks for the help.

    Those codes worked perfectly.

    One other question, how can I make the text size of the subheading responsive?

    Thank you! This forum is ace by the way, as is the theme! Love, love, love it!

    Emma

    July 5, 2016 at 4:27 pm #657144
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.av-subheading {
    font-size: 20px!important;
}}</code></pre>

    Best regards,
    Yigit

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