[Angelique]

Well, I figured out the answer. I can't remove my post, so I may as well share the answer in case anyone else needs to know it. All you have to do is create a new class. I named mine "highlight."

CSS:

.highlight {
	display:block;
}

.highlight:hover {
	outline: 6px ridge #fbdd75;
}

HTML:

<a class="highlight" href="http://theaddress.com"></a>

[Angelique]

Just wanted to say there's been one minor change to my code: Outline instead of Border (it stops the graphics from shrinking when hovered over.)

.column-row img:hover {
	outline: 6px ridge #fbdd75;
}

[Angelique]

Yes, I not only tried restarting Firefox, but I tried restarting my entire computer. My copy of Firefox does seem to have a problem.

I really have to contact Dreamhost about the https/http thing. My site is really https, but when I look at the address in any of my browser windows, I only see the domain (not https or http.)

[Angelique]

I'm on a Mac with El Capitan.

[Angelique]

Grrrrr! I restarted the computer and it still didn't help! Something must be wrong with my personal copy of Firefox.

[Angelique]

Wow! Now I don't know what to do! I'm going to try restarting my entire computer.

[Angelique]

Victor --

Can you give me an example of the php code you used to move areas outside of .site-inner? Or did you create new widgets?

[Angelique]

Okay, fixed! The problem was caused by the padding I had added to the navigation menu items. That wasn't a smart thing to do; I should have increased the size of the menu area, not the padding around the items. I was probably fooling around and forgot to change it back.

[Angelique]

I just used Safari's responsive design view, and it clearly shows a problem with the views for Safari, Chrome and IE. This screenshot is for the IE view. I just can't find any code that is specifically targeting either sidebar!

[Angelique]

I just tried it in real life; removing those didn't do anything. What's weird about that extra band (and about "News & Advice" wrapping on to two lines) is that in Chrome and Safari it happens when the page first loads, and then they go away when you move your cursor around.

I thought the problem might have been caused by trying to make the navigation bar full width, but after I returned the bar to 100%, the problem still persists. (Did you see my reply to my other post about the nav bar, saying that it was running off the right side of the page?)

I'm wondering if there are some problems because some genesis code gets repeated by my theme under @media only screen and (min-width: 930px) (this is where my theme puts most of its special formatting.)

[Angelique]

But don't selections only show up when you actually select them?

[Angelique]

Uh-oh! It DIDN"T work! If someone resizes the browser window, the nav bar stretches off the right screen! Also, the "News and Advice" link text will wrap, although it will unwrap if you click near it. (Weird!)

I will play around with it more.

[Angelique]

Victor -- Thank you! That worked!

[Angelique]

In case anyone else is having the same problem, I found the answer: You have to specify the width for each individual footer widget. In the block of code containing the .sidebar and the three footer widgets, I set the width to 35%. Then I individually styled .footer-widgets-1, .footer-widgets-2, and footer-widgets-3 with a width of 28%.

[Angelique]

Are you talking about the content width for the primary sidebar and footers (which are apparently also considered sidebars,) or the main .content selector for the two-column pages?

My primary content and primary sidebar widths were already set perfectly before I decided to try this footer-widget nonsense. The original code was:

.content {width: 48%; /* 446.40px *}

.full-width-content .content {float: none; margin-left: auto; margin-right: auto; width: 100%;}

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar {width: 35%;}

Then I decided, hey! Let use those footer widgets. They'll be useful! But changing the percentage of the footer widgets so that three fit across the page ALSO changes the width of the primary sidebar (obviously; in the code above, they are all grouped together.) However, i don't seem to be able to separate them. When I try to set JUST the footer widgets to 28% (and making a new .sidebar section set at 35%,) the widgets no longer arrange themselves in columns; they are stacked on top of each other.

I don't mind making changes to my style sheet. The worst that can happen if you mess up is your site looks stupid for 5 seconds until you change it back. It's not like a .php mistake that can crash your site (which I have done many times to other sites!) And sometimes I need to leave the stupid stuff up so that you guys can see what's going wrong!

[Angelique]

Brad --

I'm afraid I still can't connect the dots, especially since I just realized that those footers aren't just showing up on my full-width page; they are also showing up at the bottom of ALL pages. (Fixing that is another problem.) In the meantime, I have tried many different ways of applying the selectors you suggested, and I still can't figure out how to change the primary sidebar to 35% while leaving the footer widgets at 28%.

[Angelique]

Again, I'm sorry I can't delete this post and start over. I've just discovered that my footer widget content IS centered. The problem is that my theme has three footer widgets with set widths. I thought that "footer widget one" spanned the full width of the page, and the others stacked underneath it (which is what happens on a mobile device in portrait mode, anyway.)

I guess this answers my question about where my columns should go: The front page page! I can use those footer widgets for other things.

[Angelique]

GRRRRRR!!!! The "code" tags don't really just show code. I was able to edit my post once, but now that didn't help; it probably made it worse. Now I can't modify the post again OR delete it in order to post again. We should be able to edit and delete our own posts! Sorry if the code above is confusing.

[Angelique]

Brad -- That's interesting! Using "media all" with either portrait or landscape would definitely cut down on the amount of code I would need, if it works well. And according to this, I shouldn't be using any pixel-ratio specifications.

[Angelique]

Thank you for the information! Brad: That is a very awesome tool, better than the one that comes with my theme. If I understand the information correctly, it sounds like it's better to always specify a range, especially if you definitely want a different layout in portrait mode (the way most people use phones) than in landscape.

I wondered about how well my site would work in portrait mode for tablets, and then I found this code:

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

I've never seen the "orientation" style before. Is it a standard that works all the time?

I also found (-webkit-min-device-pixel-ratio: 2) for phones and non-retina screens and (-webkit-min-device-pixel-ratio: 1) for retina-screen laptops and iPad minis. Is this also standard to add?

There's even code for watches! WHO BROWSES THE WEB ON A WATCH? Do they have, like, telescoping eye-implants or something???? I will not be creating styles for watches 🙂

[Author]

Posts