How to edit the margin size and font size of home page

  • Unknown's avatar
    emservicesadminjulie · Member ·

    I noticed that the home page has different size margins and text than the rest of the pages in the website.

    The margins and text get larger when a page is set as the home page. It is like the home page contents get magnified. I would rather that not happen so my website can have consistent margins and font sizes.

    How do I change the site template or css so that the magnification of the home page does not happen?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    charleybea · Member ·

    Hello @emservicesadminjulie,

    You’re right – it looks like the homepage is getting special treatment via CSS.

    Try adding the following CSS using the editor by going to your Customizer and click on the CSS tab.

    /* ADJUSTS PARAGRAPH TEXT SIZING */
@media screen and (min-width: 768px) {
.wf-active .page-template-front-page .site-main > .hentry:first-of-type .entry-content {
font-size: 12.6px;
}
}

    And for the margins, remove the following code (line 2217):

    @media screen and (min-width: 768px) {
.page-template-front-page .site-content {
padding-left: 0;
padding-right: 0;
}
}

    and replace it with this:

    @media screen and (min-width: 768px) {
.page-template-front-page .site-main > .hentry:first-of-type {
max-width: 100%;
}
}

    This should do the trick. Let me know if it doesn’t or if you have any questions – happy to help!

  • Unknown's avatar
    gemmacevans · Member ·

    Hi emservicesadminjulie,

    If you need any help tweaking the CSS @charleybea provided, feel free to start a chat and we’ll be happy to take a look :)


    @charleybea     — appreciate your help!

  • Unknown's avatar
    emservicesadminjulie · Member ·

    Thank you, @charleybea. I really appreciate your help.

    How do I access the original css file so that I can make the edits to the template? I know how to access the customizer, but in order to make the change that you suggest to edit the margins on the home page, it sounds like I need that original file.


    @gemmacevans    , I will glady seek support for this once I get a chance.

    Thanks!

  • Unknown's avatar
    charleybea · Member ·

    Hello @emservicesadminjulie,

    Sorry, I suggested removing the above code (line line 2217) under the assumption someone on your team had manually edited the CSS file before.

    It looks like you’ve adjusted the max width to 80% to make up for not being able to adjust the CSS file directly.

    If that works for you, feel free to ignore the code I mentioned earlier about removing since you’ve found a work around.

    Alternatively, if you want it to be exact to the other pages, change the max width from 80% back to 100% like below: 

    @media screen and (min-width: 768px) {
.page-template-front-page .site-main > .hentry:first-of-type {
max-width: 100%;
}
}

    and also add this code to the bottom of the CSS editor in your Customizer. 

    @media screen and (min-width: 768px) {
.page-template-front-page .site-content {
padding: 3.2em 10%;
}
}

    This will override the code I asked you to remove earlier. I don’t think you have access to edit the CSS file directly on WordPress.com (which I don’t recommend either without a child theme).

    Hopefully this wasn’t too confusing! As @gemmacevans mentioned, you can always reach out to live chat too if that’s quicker/easier for you. Of course, I’m happy to help as well. :)

  • Unknown's avatar
    emservicesadminjulie · Member ·

    Thank you @charleybea! Your suggestion worked perfectly, as far as I can tell. I appreciate your help very much.

    Have a wonderful day!

  • Unknown's avatar
    charleybea · Member ·

    Awesome! You’re very welcome– glad I could help. :)

  • The topic ‘How to edit the margin size and font size of home page’ is closed to new replies.