Home › Forums › Pro Themes › Education Hub Pro › Content area – Top margin

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 1, 2018 at 3:01 am #73011
    Modular
    Participant

    Hello there,

    How do I remove the top margin from all webpages. More specifically, I want top of each webpage content area to align with search box on the right side bar?

    Here is the website link: http://www.mocsummit.com

    Also, check this screenshot. I want to remove highlighted yellow area.

    https://drive.google.com/file/d/1WgsZYYKJTuu5icLImQpwiklWAiSJhCwL/view?usp=sharing

    Thanks
    Gurjeet

    June 1, 2018 at 7:03 am #73020
    wensolutions
    Keymaster

    Hello,

    To remove the spacing to fix the alignment with the search section and the content area, please paste the following custom CSS in your Admin Dashboard > Appearance > Customize > Additional CSS :

    .site-main {
    margin-top: -20px;
}

    This will remove the spacing in between and align the sections as per your requirements.

    If you have any issues/queries further, please feel free to write back to us.

    Best Regards !!

    June 2, 2018 at 9:49 pm #73104
    Modular
    Participant

    Thanks.

    Can you please help me with these issues also?
    1. How do I reduce the gap between the site title (MODULAR AND OFFSITE CONSTRUCTION) and site logo?
    2. How do I align the search button to the top of site title?
    3. How can I change the font size of site title and tagline (which is underneath the site title)?
    4. How can I change the color of tagline?
    5. How can I add another tagline under the site title? Is it possible to have two rows of text under the site title?
    6. How can I change the font size of child menu items?

    The website link is: http://www.mocsummit.com

    Regards
    Gurjeet

    June 3, 2018 at 12:53 am #73106
    Modular
    Participant

    7. How to change the width of each of four footer widgets?
    8. How to change the height of footer widgets?

    June 4, 2018 at 12:08 am #73128
    wensolutions
    Keymaster

    Hello @gurjeets,

    Please find the answer to your query below:

    1. How do I reduce the gap between the site title (MODULAR AND OFFSITE CONSTRUCTION) and site logo?

    Response: To reduce the gap between the site title and the logo use below given CSS.

    .custom-logo-link {
    margin-right: -50px;
}

    2. How do I align the search button to the top of site title?

    Response: To align the search button and the site title use below given CSS.

    .search-section {
    padding-top: 0px;
}

    3. How can I change the font size of site title and tagline (which is underneath the site title)?

    Response: To change the font size of the site title use below given CSS.

    .site-title {
    font-size: 25px;
}

    To change the font size of the description use below given CSS.

    .site-description {
    font-size: 12px;
}

    4. How can I change the color of tagline?

    Response: To change the color of the tagline go to Admin Panel > Appearance > Customize > Color Options > Header Color Options > Site Tagline Color and change the color as per your requirement.

    5. How can I add another tagline under the site title? Is it possible to have two rows of text under the site title?

    Response: You cannot add a different tagline in another line.

    6. How can I change the font size of child menu items?

    Response: To change the font size of the tagline use below given CSS.

    .main-navigation ul ul a {
    font-size: 12px;
}

    7. How to change the width of each of four footer widgets?

    Response: Is you tried to increase the width of the footer widget area then the layout will distors i.e. the widget area will fall down. So it is better not to change the width of the footer widget area.

    8. How to change the height of footer widgets?

    Response: To change the height of the footer widgets use below given CSS.

    #footer-widgets {
    padding: 84px 0;
}

    Here in all above give CSS adjust the px as per your requirement.

    Also, make sure to add all above CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    Hope this helps.

    Best Regards!!

    June 4, 2018 at 1:55 am #73131
    Modular
    Participant

    Thanks so much !

    9. How can I change the font-size of website content?

    With regard to my previous question # 7, the text in footer-widget # 1 wraps into the line underneath !
    How to do solve this problem? I was wondering if I could change the width of each of these footer widget areas to get rid of this problem. Since you recommended not to change the width of footer widget area, what other option do I have?

    June 4, 2018 at 2:05 am #73132
    Modular
    Participant

    Also,

    10. How can I change the font-type of ‘contact number’ and ‘contact email’ (above the site-title)?

    June 4, 2018 at 3:43 am #73134
    wensolutions
    Keymaster

    Hello @gurjeets,

    As for your query related to increasing the width of the footer area for the text, use below given CSS.

    For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.

    @media (min-width:992px){
	#footer-widgets .inner-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	#footer-widgets .inner-wrapper .footer-active-4:first-of-type {
		flex: 2;
	}
	#footer-widgets .inner-wrapper .footer-active-4 {
		flex: 1;
	}
}

    Now to change the font type use below given CSS.

    #quick-contact a #tophead {
    font-family: 'Exo', sans-serif;
 }

    Here change the font as per your requirement.

    Thank you.

    Best Regards!!

    June 4, 2018 at 4:15 am #73136
    Modular
    Participant

    Thanks !

    Sorry, but I am unable to change the font-type to ‘Exo’?

    Can you please look at this screenshot and let me know if I am doing something wrong?

    https://drive.google.com/file/d/1piLkWHNa1Qcd-d5OWyb9otZfo9CGnzc0/view?usp=sharing

    Also, can you help me change the font-size of website content? Refer question # 9 in my previous post.

    June 4, 2018 at 4:54 am #73140
    wensolutions
    Keymaster

    Hello @gurjeets,

    For the font type replace above given CSS with the CSS given below:

    #tophead #quick-contact a {
    font-family: 'Exo', sans-serif;
 }

    And to change the font size of the content use below given CSS.

     #content p {
    font-size: 12px;
}

    Hope this helps.

    Thank you.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.