Twenty Thirteen Child Logo Issue

So the problem with #2 is that your image has an attribute width of 430, meaning it’s going to keep the width of the page at 430px (I thought you also had another element whose min-width was set, but I don’t see it anymore, maybe you changed it while I was examining your site?). You can see this when you scroll the page down on your cell phone, the white space isn’t just to the right of your menu bar but to the rest of the content as well, including the footer.

I would maybe set a media query that sets the width to 100% and the height to auto when the screen width goes under 480px.

As far as the quality of your logo image goes, how did you get the logo in the header in the first place? Twenty Thirteen doesn’t have an option to add a logo. What I see for the logo file name is this:

https://semaystudio.com/wp-content/uploads/cropped-cropped-cropped-cropped-cropped-cropped-IMG_2675.png

When I see cropped like that, that tells me that WordPress (or whatever plugin you are using for the logo) has not only cropped the image but also reduced the resolution. You should try getting the uncropped image in there instead:

https://semaystudio.com/wp-content/uploads/IMG_2675.png

Thank you for your reply! I’ve tried adding the following CSS (as per a WordPress “media query” topic), but I really don’t think I’m doing it right.

@media screen and (max-width: 480px) {
.container {
max-width: 100%;
}
.content {
width: 100%;
}
.sidebar {
width: 100%;
}
}

Is there anyway I can give you the editing password so you can take a look at it?

As for the logo, I’m getting a designer to make a new, professional one so I don’t run into pixel issues. I’m thinking this should help? Is it ok to leave the image width as 430? If not, where/how can I change?

THANK YOU.

• This reply was modified 8 years ago by semaystudio.

No, per forum rules, you should not post any passwords or contact information.

And no, you don’t want to change the width of the containers, you want to change the width of the image so it’s not 430px on a cell phone, because it will keep the page too wide.

You can try adding this CSS through your child theme’s style.css file:

@media screen and (max-width: 480px) {
   #logo-trp img {
      width: 100%;
      height: auto;
   }
   #logo-trp {
      min-height: 0;
   }
}

IT WORKED! THANK YOU!!! You’re a life saver! I greatly appreciate your help!

Now for when I upload my new logo, what image size do you suggest for a clear image? I need it to be centered as well. It’s not quite centered at the moment (on my desktop only).

• This reply was modified 8 years ago by semaystudio.

I also do have one more question now that you’re a WordPress wizzard.

I can’t figure out how to get my checkout to calculate a $12.99 charge of shipping when customers select the United States option (only for orders under 79.99). Can you direct me here?

Do you mean centered sideways or vertically? On my cell phone it seems to be centered sideways OK. It does appear to be a little high, but once the “demo banner” is removed, you should be able to see the entire logo. There is a lot of white space beneath the logo, and that is because the image itself has a lot of white space at the bottom. On your new image, I would remove as much of the excess white space from the bottom (and top) as possible, and then if you need to add some space when the image is on the page, you can do so by adding a margin-top or margin-bottom property.

As far as the shopping cart goes, I don’t have any expertise on that. You should try posting that question on the Woocommerce support page.

Ok – thank you!! I just mean centered to the page on my desktop version (not my phone version).

I have one problem remaining on my desktop version only.

How can I extend all the menu options (on the menu bar) so they’re all an equal distance apart (from the left all the way to the right). There’s a large black space on the right side of the menu bar.

Thanks!

Try adding these rules to your child theme’s style.css file. This should evenly distribute all menu items across the entire width of the screen.

.nav-menu {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-justify-content: space-around;
   -ms-justify-content: space-around;
   justify-content:         space-around;
}
ul.nav-menu {
   padding-right: 0
}
.main-navigation {
   max-width: none;
}

Note that the magnifying glass at the far right of the menu bar can’t be seen because it’s black and blends in with the color of the menu bar, so your visitors might not see it. If you hover your mouse over the shopping card menu item on the far right, you can see it when the menu item’s background turns white. Actually, that’s one of the reasons you have a little bit of blank space off to the right, for the search field (if you click on the magnifying glass, the search field expands).

• This reply was modified 8 years ago by CrouchingBruin.

It worked!! Thank you!
Is there anyway to delete the magnify glass option so it doesn’t cut off the cart value? Or even resize all the menu option spaces to accommodate the magnify glass?

Also, regarding colors…

1. Under shop when I:

-hover over category,
-hover over a product name and
-hover over view cart – all the text is orange. Do you know how I can change this text to black?

2. How can I change the “proceed to checkout” purple color (when I hover) to grey?

To hide the search field:

.search-form {
   display: none;
}

Change hover color for products & View Cart to black:

.products a:hover {
   color: #000;
}

Proceed to Checkout button to gray (didn’t know exactly what shade of gray you wanted, so you can adjust as necessary):

.wc-proceed-to-checkout a.button.alt:hover {
   background-color: #777;
}

• This reply was modified 8 years ago by CrouchingBruin.

THANK YOU! Did anyone ever tell you you’re amazing? Lol. Thanks again!

Hello my WHIZ friend,

3 more questions if you don’t mind….

1 – The pages “about” and “advocate” have drop down menus. How do I change the actual “about” and “advocate” tabs to not have click options on these actual words – but JUST on their drop down menu options? For example, when you click on “about” you’re directed to a blank page. I don’t want this page to exist at all.

COLORS:

2 – How can I change the drop down colors on “about” and “advocate” from orange to black?

3 – Once I’m inside a product description page how do I alter CSS to change the “add to cart button” color? I’d like the button to remain black (not purple).

Thank you!
Bella

Hi, Bella. For the first item, see this post. This will show you how to create a dummy menu item that doesn’t link to a page.

For the next two items, can you please temporarily disable your maintenance mode? I will have to examine the site using a web debugging tool to see what CSS to use. Thanks.