1

I am using Generate Pro theme of Genesis and the biggest con about this theme is the size of the heading when seen in the Mobile. Also the Font.

As the users are shifting more on mobile, is very important for me to make my site look beautiful in Mobile.

What do I mean? How Title Looks in the Mobile

As you can see it is taking up all the above(up-the-fold) content only for the heading.

All my Content shifts low and I have to scroll for seeing it. Which BTW nobody likes.

Also the Font-Looks Very Bad, it is really light in colour and most of the people have to focus high to see it.

I changed the font with the help of Google Font Plugin but still, the size of H1 is non-changeable, I tried Google Font and also tried changing code font-size in the WordPress but nothing helped. The code I tried changing looks like this.(Below)

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 20px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}
Mukeshwar Singh
  • 35
  • 6

2 Answers2

1

Using @media CSS, you can do things like this:

@media screen and (max-width: 780px) {
  h1 {
    font-size: 25px;
  }

  /* More CSS */
}
Chris Happy
  • 7,088
  • 2
  • 22
  • 49
  • Thanks, but now I changed the theme, I have another query. I am currently using Academy Pro theme. My current theme has a little problem that by default the background of all the post is grey but i want it to be White, see how it look now -> https://ibb.co/V3sx8t9 It would be great if you please help me with this. – Mukeshwar Singh Dec 01 '18 at 09:23
  • Hey @MukeshwarSingh If you create a new question and post a link here, I could try to help you with it :) – Chris Happy Dec 07 '18 at 23:56
1

As Chris mentioned, you can use media queries to make your styles have different behaviors depending on the size of the screen. Here are some examples:

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

Also, making more specific classes you will make the style has more importance. For example:

body .title h1 {}

will have more importance than:

 body h1

or

h1
Gabriel B.
  • 69
  • 5
  • Thanks, but now I changed the theme, I have another query. I am currently using Academy Pro theme. My current theme has a little problem that by default the background of all the post is grey but i want it to be White, see how it look now -> https://ibb.co/V3sx8t9 It would be great if you please help me with this. – Mukeshwar Singh Dec 01 '18 at 09:23
  • You must add a custom CSS in the wordpress theme it a background color of #FFF on the element class name. Ex: body { background-color: #fff} – Gabriel B. Dec 03 '18 at 01:35