Support » Fixing WordPress » Responsive Heading Font Size

  • Resolved mextro

    (@mextro)


    Hi could someone help me with some custom responsive css ? Im a trainee at this media company in the Netherlands and I need to make this website responsive, it worked out for the content but naturally I can’t set responsive sizes for headings, have a look at http://www.degoudgelepatat.nl on your phone was wondering to use it for the Rosa theme. The heading I want to change is called “article__headline”. The font needs to change to 65px on mobile and 79px on tablets

    @addwebsolution posted this online once

    https://wordpress.org/support/topic/changing-site-title-font-size-keeping-responsive-properties/

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 1040px;
    }
    }
    @media screen and (max-width: 800px) {
    .site-title {
    font-size: 1.6rem;
    }
    }
    @media screen and (max-width: 480px) {
    .site-title {
    font-size: 1rem;
    }
    }

    Im not really familiar with responsive CSS.

    Thanks in advance!

    • This topic was modified 3 months, 1 week ago by  mextro.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi, is ‘article_headline’ a class name? is it on the front page?

    I found it is ‘article__headline’ and it is a class of a <hgroup> tag.I think you want to change the h2 font-size.You can try something like

    
    @media screen and (max-width: 800px) {
    .article__headline h2 {
     font-size:79px;
     }
    }
    @media screen and (max-width: 480px) {
    .article__headline h2 {
     font-size:56px;
     }
    }
    

    add this code at the bottom of your style.css file and ctrl+f5 to see the refreshed version of the style.

    • This reply was modified 3 months, 1 week ago by  dimitris33.

    Thanks Dimitri that works, I think I can tweak it a little for it to work on both headings. 🙂

    Changed it into this and now it’s perfect!! Big thanks pal

    @media screen and (max-width: 800px) {
    .article__headline h2 {
     font-size:79px;
    padding-bottom: 30px
     }
    }
    @media screen and (max-width: 480px) {
    .article__headline h2 {
     font-size:65px;
    	padding-bottom: 30px
     }
    }
    
    @media screen and (max-width: 800px) {
    .article__headline h1 {
     font-size:30px;
     }
    }
    @media screen and (max-width: 480px) {
    .article__headline h1 {
     font-size:20px;
    
     }
    }

    super 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.