demasiri

You’re welcome!

Chrome has built-in features to let us view the CSS (stylesheets) on a website, so it let me see what was already there and work out tweaks for it.

As for learning this, there are a wealth of resources online that will teach you how to work with CSS. As you make more changes and tweaks to your blog you’ll learn new tricks as you go. I’ve been doing this for a fair few years by now so it comes a little more naturally.

Good luck, and you know where these forums are should you need any further help and advice in the future.

• This reply was modified 8 years, 1 month ago by demasiri.

Hi again @athomewithazlie.

@sterndata – I requested that she post here as I was going to help, but the original post was on the WordPress.com forums so wanted to keep things separate from there.

There are a few differences between the two themes, but let me let me just quickly run you through the tweaks I looked at.

There’s a few bits to change in the CSS, but the main parts are .header and .container classes. Note, there are multiple versions of these declarations but it’s nothing to worry about!

Under Appearance > Editor you’ll want to edit Styles.css (this should be automatically selected)

FIRST! Copy all of the CSS code from the edit box you’ve just opened and save it to a new text file on your computer just to be safe. This is advised with all large edits you make. ??

Find @media all and (min-width: 1200px) and under here you want to edit/add to .container and .header classes:

.container {
    margin: 0 auto;
    width: 1020px;
    padding: 0 10px;
    overflow: hidden;
    background-color:#fff;

and

.header {
    position: relative;
    width: 1020px;
    margin: 0 auto;
    padding: 40px 10px;
    background-color:#fff;

The things that I’ve changed in this, as you’ll see, is made sure that both declarations have background-color: #fff (this is a white background) and edited the margins and padding to make sure that they look good on the page and wrap around the content neatly. Make sure you only edit the background-color, margin, and padding. The rest should remain the same!

Repeat this with the section under @media all and (min-width: 481px) and (max-width: 1199px) making sure you only edit background-color, margin, and padding and you should be golden!

If you get stuck, please don’t hesitate to let me know.

• This reply was modified 8 years, 1 month ago by demasiri.
• This reply was modified 8 years, 1 month ago by demasiri.
• This reply was modified 8 years, 1 month ago by demasiri.

As far as I can tell, it’s to do with the width of the source images. The two that are cropped out are wider than the ones that are correct.

https://servicedogattire.com/wp-content/uploads/2017/01/therpay-dog.jpg <– the source image here, for example, could stand to have the whitespace either side cropped out and it’ll probably work for you.

Rather than trying to fix this with code I think it’d be easier to use square images going forward. ??

You should be able to use .png and .jpg when uploading through the Site Identity section of the Customize options of your theme. It will also allow you to crop the image before finalizing the upload from what I can remember.

This is what I’m seeing. Maybe this will help you: https://imgur.com/MfoCJrN

Hopefully you can get to the bottom of it.

It seems to be rendering out okay on my end. Android, tried both the pre-installed browser and Chrome app. Both garner the same results.

Where exactly are these issues appearing? Maybe I’m just not seeing it.

500s on WP is usually caused by a conflict with plugins or with the .htaccess. More likely plugins, which you will need to deactivate. Of course, if you’re unable to get onto your admin dashboard you’re going to have to do this manually.

The info here should walk you through a couple of options how to do that. Depending on how confident you are with server administration, I’d recommend the FTP route as the easier of the two options.

If you’re still unable to access the dashboard after doing this, then the issue is likely with one of your .htaccess rules. Access your FTP and show hidden files, rename the .htaccess and then try to access wp-admin again.

If you need more detailed clarifications or assistance, let me know (or anyone else trawling this section.)

-D

There might be a number of solutions, but I’m assuming you want the quickest and easiest – which would be to edit the nav links on your top nav to explicitly call the url.

So, something like <a href="//tc325.com/#aboutUs">About Us</a> or something like that. Testing this in the inspector on Chrome seemed to work.