Digital Pro – Decrease space between breadcrumbs and header and title

[nelson.cardoso]

Hi everyone,

For the post (not the homepage) pages, my bosses have asked that I reduce the the space between the breadcrumbs and the header area, as well as between the breadcrumbs and the post title. There's a lot of empty space there when we see it on the desktop.

I previously got a little help that pointed me to .breadcrumb and .site-inner, but when I make changes in there, I don't see any changes in the spacing in those areas.

Any suggestions?

Thank you
Nelson

[Susan]

Would need link to your site to be able to see what you are working with...

[nelson.cardoso]

Hi Susan, thanks so much for responding... here's a sample: http://mackenziehealth.ca/mvh/full-width/

I'd love to reduce the space below and above the breadcrumbs. Thank you.
Nelson

[carasmo]

In your child theme style.css there are two areas:

/* Line 760 for .site-inner */

Before:

.site-inner {
	background-color: #fff;
	clear: both;
	margin: 90px auto 0;
	padding: 10% 40px;
	max-width: 1280px;
}

After:

.site-inner {
	background-color: #fff;
	clear: both;
	margin: 45px auto 0; /* top margin changed to 45px */
	padding: 5% 40px; /* top and bottom padding changed to 5% */
	max-width: 1280px;
}

/* Line 840 for .breadcrumb */

Before:

.breadcrumb {
	border-bottom: 1px solid #eee;
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 auto 10%;
	max-width: 660px;
	padding-bottom: 10px;
}

After:

.breadcrumb {
	border-bottom: 1px solid #eee;
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 auto 5%; /* bottom value changed to 5% */
	max-width: 660px;
	padding-bottom: 10px;
}

---

Genesis Theme Customization and Help

[nelson.cardoso]

That was extremely helpful! Thank you so much.

[carasmo]

Ahh, I read that you don't want to affect the home page, in this case you'll need to use CSS specificity to add back in the padding in the properties as follows:

Line 772 BEFORE:

.digital-landing .site-inner,
.front-page .site-inner {
	margin-top: 0;
}

AFTER (adding it back in just for these types of pages)

.digital-landing .site-inner,
.front-page .site-inner {
	margin-top: 0;
        padding-top: 10%;
        padding-bottom: 10%;
}

---

Genesis Theme Customization and Help

[nelson.cardoso]

Thank you for taking the time to help me with this.

[carasmo]

You're welcome. Take a moment to mark the thread resolved.

---

Genesis Theme Customization and Help

[nelson.cardoso]

All done. Thanks again... I really appreciate it.

[nelson.cardoso]

Hi Carasmo, I'm so sorry to approach and bug you again with the same topic. I tried making changes before reaching out to you but I didn't get it right. You helped me add space above and below the breadcrumbs. Now I'd like to reduce the space below the entry title and the content. If you visit this page: http://mackenziehealth.ca/mvh/2016/10/14/project-vision/ you'll see lots of space between "Project Vision" and the first paragraph... "Creating a World-...".

Thank you so much.

[carasmo]

Find line 1596 in your style.css

BEFORE

.page .entry-header,
.single .entry-header {
	margin: 0 auto 5%;
	max-width: 660px;
}

AFTER:

.page .entry-header,
.single .entry-header {
	margin: 0 auto 0; /* changed the bottom value from 5% to 0 */
	max-width: 660px;
}

The pattern is

top right bottom left

so margin or padding that is:

5% 0 -- is top and bottom 5%

0 5% -- is left and right 5%

0 2% 4% 7% -- is top nothing, right 2%, bottom 4%, and left 7%

Use Chrome or FireFox developer tools to locate the class you need to change. Also look at the parent class, this .entry-header is the parent of the h1.

---

Genesis Theme Customization and Help

[Author]

Posts