[CleanPageDom]

Hi there

I don't think you can target specific devices (such as phone, tablet etc) with CSS, but you can target devices of a certain width.

Where have you added your code? Is it in the media queries at the bottom of style.css? You could target, say, devices of 600px wide or less and that should do it - for most phones, at least.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Great. Sorry, should have been clearer on the "respond box". I'm new around here!

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Grace

Find this:

.header-image .title-area, .header-image .site-title, .header-image .site-title a { } and comment out the max-width:260px;

Then find:

.site-title a { background: url(etc etc) no-repeat /*ADD THIS*/ center; } remove the "!important" if you like.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there, blendenzaehler

Did you get this fixed? Couple of questions if not. Have you uploaded an @2x version of your logo? Have you changed the dimensions for the site logo in the retina settings on the style.css?

Upload an @2x version of your logo (ie one that is twice the size of the regular logo, with @2x at the end of the file name). Then, in style.css you need to find this at the top of the Media Queries (toward the bottom):

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

.header-image .site-header .wrap {
background: url(images/[email protected]) no-repeat left;
background-size: 320px 164px;
}

}

And change the dimensions where it says "background-size" to match those of your original logo.

So, for example, if your standard logo is 100px x 100px, you need to create a logo that's 200px x 200px, name it "[email protected]" or whatever, upload it, then set the "background-size: 100px 100px;"

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there. I think there are two ways of doing it. The gap is caused by the margin at the bottom of the .entry - which is set at 4rem across the whole site. So you could either target the .entry in your individual posts:

body.single-post .entry { padding-bottom: 0 } /* or whatever you want to set it to*/

OR you could add a negative margin to the respond box:

#respond { margin-top: -4rem } /*or whatever you want to set it to*/

Hope that helps. I've only tested it in Chrome's developer tools, rather than changing the style.css file on my Framework test site.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Dave

Thanks for such a thorough response. I've looked into the Bride Rush site a little more and realised it's essentially an eCommerce site rather than what I thought it was - a search and reference site. The customer needs to be able to choose a deal and then purchase a voucher, which then gets passed on to the company offering the deal. Bride Rush seems to be an intermediary creaming a little off the top for having all of these deals in one, searchable place.

So I guess I'm going to have to go down the standard eCommerce route and work out how to get those dropdown category sorters working. That being said, I'm struggling to find a plugin or extension that provides that functionality. Woothemes seems to come the closest with its Product Finder extension so I might venture down that path. For the budgets we're talking about (a little more than €150, but not too much more!) I need an out-of-the-box solution ideally.

Interestingly, I was asked this morning about building a site for an estate agent, so I might be coming back to AgentPress for its intended purpose,and less messing about 🙂

Thanks again
Dom

---

Let’s build a website together…

[Author]

Posts