[CleanPageDom]

Hi there

The text in the list is aligned left, but any .entry-content ul or .entry-content ol has a 40px left margin.

In style.css you're looking for:

.entry-content ol, .entry-content ul {
    margin-left: 40px;
}

You can either make it smaller (eg 20px) or make it 0, but then the bullets may be too far left for your liking.

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Jason

Just messing around in Inspect Element, it looks like you can float the entry-content p to the right and then set a % width, although you'd need to do a bit of tinkering in the media queries to reset it to get it to behave on tablet/mobile.

You'd also need to specify the blog page template, rather than just setting a width on entry-content p or you'd end up with weird text on all of you pages/posts.

Something like:

.page-template-page_blog .entry-content p {
float: right;
width: 46%;
}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

The dimensions for the header image are set in the functions.php file.

(This is from Centric Pro as that's what I'm working in now, but the principle is the same):

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'height'          => 80,
	'width'           => 360,
) );

You need to edit those dimensions to match your image. Then you'll need to make some CSS tweaks. In the style.css, there will be some min-height: 80px settings. You need to set these to the height of your updated header image.

Looking at Centric Pro, they are .site-header .wrap and .header-image .site-title > a - although there may be others in Metro.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Sorry, ignore me. Hadn't looked at the settings properly. Just unticked the "Show Page Title" added it as the widget title and styled that in the CSS.

We can mark this as resolved!

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hey there

Sorry for not getting back sooner. This worked perfectly. Much appreciated.

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Thanks for the help. This removes the button as well, though. Can I adapt that in some way to include a link to the relevant post? So, for example, the first on the list would be:

"Weekday Entry & Meal Deal £6
Get The Deal"

I just want to get rid of that initial "..." which I guess is added to the end of the excerpt.

Dom

---

Let’s build a website together…

[CleanPageDom]

OK, try this.

Go bakc to the media only screen and (max-width: 1023px) in style.css

Where I told you to:

.site-header .widget-area {
width: 20%
}

Change to:

.site-header .widget-area {
float: none;
width: 100%;
}

Leave the padding as is. It's working for me in the Chrome emulator. See how it goes on the live site. If it doesn't quite work, then we can play with position: relative and go at it from that way.

Sorry for the mix-up.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Sorry for the delay. Just looking into it now. It's because I told you to reduce the width of the widget area. May have to take a different approach.

Dom

---

Let’s build a website together…

[CleanPageDom]

You need to change a couple of lines in your media queries in style.css.

Look for @media only screen and (max-width: 1023px)

The reason the hamburger is jumping below the site title is because at 1023px and below, the right header widget resizes to 100%, so look for:

.content, .footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.minimum-landing .site-inner,
.sidebar,
.site-header .widget-area,
.site-tagline-left,
.site-tagline-right,
.title-area {
width: 100%;
}

Below that, add:

.site-header .widget-area {
width: 20%
}

If you want to keep your code a little neater, remove .site-header .widget-area from the first list.

Then you need to add some padding to the widget-area, otherwise it will sit right at the top of the screen. So find

.site-header .widget-area {
padding: 0 5%;
}

Change this to:

.site-header .widget-area {
padding: 17px 5% 0;
}

You can experiment with the 17px.

Hope that helps.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

One way you can do it (and I've only just checked this on my portfolio, but I would guess it applies to all WordPress sites) is:

Go to the relevant page and view the source code (in Chrome, right-click > View Page Source). You should get a new window with the page's raw code.

If you do a find (apple + f on a Mac - not sure on a PC, sorry). Search for "postid" - if you find that, its'a post. If not, it's a page (you can double-check by searching for "page_id").

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

The dashed border in the example site is done with:
border-top: 1px dashed #f1f1f1;

So you'd need to add this wherever you felt necessary (such as in .entry-content {}). It wouldn't affect responsiveness if you just did border-top/border-bottom.

It would depend which areas within the body you were trying to target as to how you'd go about that, but I suppose you could add something below an image, like this:

.entry content img {
border-bottom: 1px dashed #f1f1f1;
}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

You need to add padding to .title-area:

.title-area {
padding 0 0 0 20px;
}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Not familiar with DPP, but if you add the following somewhere in style.css (DPP may allow the same thing), it should work:

body.gppro-custom .entry-content h3 {
font-weight: 700;
}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

If you just have one landing page, you can do "view page source" (right click and select) and find the page-id-

Then you would add, in style.css

body.page-id-XX .site-container {
padding-top: 0;
}

You could also add a custom body class to your landing page in the page editor screen (eg 'landing'). Then if you create more than one landing page, each with that custom body class, something like:

body.landing .site-inner {
padding-top: 0;
}

would cover all of them.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Try adding this to style.css

.site-inner .entry-content > p:last-of-type::after {
	content: " \25A0";
	font-size: 12px;
	color: #999;
	line-height: 0;
}

But check, as it was adding the character to one of your sidebar elements also, so you may need to get more specific with the CSS. Should get you started though.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi James

Bear with me here, I may have missed something. I made a few small adjustments.

Add, in style.css:
h1.site-title { padding-top: 50px; }
.site-title a { padding: 50px 0 0; }
.site-header .site-title a { padding-left: 0; }

You may also have to adjust the top and bottom padding on .site-header .genesis-nav-menu li a to get the white background over the active page to match the bottom of the header background.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Just watch out for some of the newer ones (such as Parallax Pro, Cafe Pro, Altitude Pro) as they have widgetized front pages, so you'd need to code up the home pages through Widgets. You should stick to the more blog-style layouts maybe?

---

Let’s build a website together…

[CleanPageDom]

Hi there

The code in the Scary Close site looks like this:

#about {
  background-image: url('http://scaryclose.com/wp-content/uploads/2015/02/opt-in.jpg');
  background-size: 900px 257px;
  padding: 8rem 0 3.6rem !important;
}

So, prepare your background image, upload it either into themes/THEMENAME/images (via ftp) or into the Media Library, then set your css to:

#about {
background-image: url('http://filename/path') <strong>OR</strong> url(images/filname.ext);
background-size: EXPERIMENT;
}

You could also follow this guide from CSS Tricks and set it to:

#about {
background-image: url(images/filename.ext) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

This is a really silly question, but have you made sure the "Number of slides to show" setting is set to 7?

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Is it ignoring all of it, or just some?

You have an extra space in .intro-text 2, in that second media query.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts