hannahloomis

Yes, you’re right – some of the code was a mess! I went through and closed where needed, then added:

.entry-meta {display: none;}

and now it works perfectly. And it cleared up another problem I was having. Thanks so much!

Hi Siobhan – sorry; I realize I wasn’t very clear…the code I thought I had commented out was CSS I added in my child theme’s style.css file. Thanks for making sure I understand how it works, and for the tutorials. And thanks for finding the offending piece of code. I’ve removed it and now the site’s working perfectly on all devices.

Actually – I just commented out the margins code to see if that would fix things, and even after clearing browsing data for the past day, the site doesn’t look right on a phone. If you look at About or Nominate, you’ll see the text disappears off the right side of the screen.

Any idea how I would fix that? Thanks!

Hi Siobhan

Thanks for the menu tip – now it’s working correctly!

And thanks for addressing the CSS question in the same post. I am working in a child theme – it was the first thing I did when I created the site. So I’m adding all my custom CSS through the editor.

I got the sidebar appearing on the left using the Theme Options, but I felt there was too much white space to the left of it, so I wanted to remove it using CSS. Unfortunately that’s now affected how it displays on different devices. Is there a reference for what code I’d need to include in order to make sure I catch all the different screen sizes? I’m having trouble targeting the right selectors, even using Inspector.

And another thing…I wanted to move the left navigation over to the left so I removed the left margin. And then I wanted the primary content area to be wider, so I set it to 700px, and no right margin. It looks good on the desktop, but I’m not sure what code to add so it will work for mobile. Here’s the code I added to my css:

/* to move sidebar nav to left */
#secondary.widget-area {
	left-margin: 0px;
}

/* to make primary content area wider */
#primary.content-area {
	width: 700px;
	margin-right: 0px;
}

What do I need to add to make it responsive?

Thanks so much!

Thanks, Siobhan – I’m definitely heading in the right direction now. I’ve got a couple of secondary menus working on the left-hand side now. But they’re also appearing at the top of every page, above the main navigation. I really don’t want that! Is there a way to remove it from there?

Hi sacredpath – thanks for your note and questions.

1. No – I want them to show up 3 images in each row until the bottom row, which would have the last 2 images. And I want those last 2 images to be the same size (not much larger than) as the images that are 3 to a row.

2. I’d like the captions to display on the initial landing page (not after clicking), just below each image. And I don’t want them to display on hover.

That did it – thank you!! Totally counter-intuitive, to my thinking, but I figured there had to be a built-in solution ?? Thanks again – it was driving me nuts!