Responsive Heading Font Size

  • Resolved mextro

    (@mextro)


    7 years, 5 months ago

    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 https://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://www.ads-software.com/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 7 years, 5 months 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 7 years, 5 months ago by dimitris33.
    Thread Starter mextro

    (@mextro)

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

    Thread Starter mextro

    (@mextro)

    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)
  • The topic ‘Responsive Heading Font Size’ is closed to new replies.