Change header 1 font size in blog area (overview part and blog posts)

dear apex team:

After an update, the font size of my h1 for my blog posts as well as the blog overview section have changed. I have tried to change that via the css function (at least for the single posts)

.single-post .entry-title {
text-align: center;
font-size:200% !important;
}

however something seems to override the above code for changing the font-size for the header of the blog posts.

Any idea why that could be? Thanks so much for your help: www.happycoollove.de/happycoollove-blog

Hello @perisoylu,

Thanks for asking. :slight_smile:

On my end above code seems to be working fine and I can see that same has been added. But I am not sure what you meant by code not working on the header. Can you please elaborate? Here is what I see on my end. https://cloudup.com/cd71W8_KNCN, https://cloudup.com/c0ol6_-orSQ

Thanks.

Hi Prasant,

Thanks for your quick reply. You are right, I should have elaborated a bit more. You can see the header but it is a lot smaller than it is supposed to be. I put the font-size up to 200% and the size remains uneffected by the changes I made. I want the header font to be larger, same for the overview site of my blog posts. Ever since a new update, the font size went smaller and I have no clue as to why. Thanks so much for your support!

Hi there,

There is a code in the custom CSS that is setting the font size smaller which is:

.entry-title {
    font-size: 130%;
}

The default size of the entry title element is 250% so if you remove the code above, you should be able to have the title bigger to 250%.

Hope this helps.

Hi Jade:

Thank you! That was exactly it! I erased it now and it worked. Again, thanks so much! I do have one more question: On my main page I have picked the option not to display one of the pictures when the site is seen on a mobile screen. I would like to undo it now however, but I cannot find a way to do so. Basically I want to undo the option of an image not being seen on mobile phones. The picture is on the home page (www.happycoollove.de) and the image in question is: http://happycoollove.de/wp-content/uploads/2018/02/Peri-LR_bg_96.jpg. Thanks so much again!

Best,
Peri

Hello Peri,

Kindly check on the customize option of the image element, column, row, and section settings because they all have the Hide During Breakpoints option and you might have set the option in some of those settings.

If you are not able to view the element as it will only show on mobile view, you can simply adjust the cornerstone view setting. See screencast below:

Hope this helps.

Hi there,

You can select the section and then go to the customize area and then you can set hide during breakpoints. Refer to the example below.

Thanks!

Hi @Jade & @mldarshana :
Thanks for your fast reply. I have checked, however, I cannot see that I set the option “hide during breakpoints” for that image in one of those areas you have described above. Just one thing I should add, I did not actually use an image element for this image, because I wanted the image to be the full size of the section/container and to adjust its size with screen (responsive) and the only way I know how to get there is with choosing a text element, using the class option and use some css to place the image. However - I checked with the options of the text element and I see no “hide during breakpoints” option that have been switched on. I just tried: If I use an image element and place that image in there, I can see the image in mobile view, however the image is not fully responsive in all screen sizes (I really want the image to be always in the same size as the container, no exceptions). Maybe there is another way to achieve this and have the image displayed on mobile screens, too? Thanks so much! I really appreciate your support :slight_smile:

Hi Peri,

As mentioned in the previous post kindly also check the customize setting of column, row, and section (see previous video attached) as the hide during breakpoints can also be set in those areas.

Let us know how it goes.

Hi @Jade: Thanks for your reply! I had already checked throughout the column, row and section and could not find where that option is still activated. It still remains a mystery to me why I cannot see that image on mobile view, because I cannot find that option being activated anywhere it in the customize settings…

Hi there,

Would you mind providing the admin details of your site in a secure note and the link to the page that you are working on.

Thank you.

Hey @perisoylu,

Yes, please provide your admin credentials. The system auto closes the thread after 10 days if there is no reply.

Thanks.

HI Peri,

The image gets hidden because of this code you have added in the customizer:

.liebe-image {
    background-image: none;
}

under the media query media only screen and (max-width: 768px)

If you want the image to be shown on mobile, try updating the CSS to:

.liebe-image {
    min-height: 650px;
}
1 Like

Glad it’s okay now and you’re most welcome!

1 Like