tja315

Figured it out! For anybody else looking to do the same – I added the following code to the Custom CSS
`.logo {
max-width: 1300px;
display: block;
height: auto;
margin: 0px auto;
}’

The logo isn’t centered in the tablet view, but I can’t figure that one out. Let me know if anybody can do that. Otherwise, I’ll consider this good enough. ??

Thanks!

The header CSS doesn’t seem to have worked. I just added it to my Custom CSS and the logo is still overlapping with the menu bar on the mobile view.

Also, now my pages are back to the narrower/default width! Not sure how that just happened.

Here’s what’s in my Custom CSS field; see any reasons why the header wouldn’t be auto adjusting, or my pages are back to the default width?

/* navigation bar background */
#site-navigation ul {
    background: #dd9933;
}
/* navigation items background */

#site-navigation #menu-main li {
background: #dd9933;
display: inline-block;
    float: none;
}

/* navigation items hover background */
#site-navigation li:hover {
    background-color: #ffffff;
}

.todocontenido div.focus-post {
opacity: 1;
}

#site-navigation {
    background-color: #dd9933;
}
.widgets-grid-layout .widget-grid-view-image img {max-width: 150px;min-width: 1px;min-height: 1px;

<img style="width:(the real width of the image smaller than 510px)px; margin-left:0"

.entry-content img.alignright, .entry-content img.alignleft {
width: auto;
}

/* center navigation items  */
#site-navigation ul {

    width: 80%;
}
@media only screen and (min-width: 1100px) {#site-navigation {
width:1100px;
margin: 0 auto;
}}
@media only screen and (min-width : 870px) {
#content, .slider, .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed, .author-bio, #content .widget
{ width: 900px;}

#header {
    height: auto;
}

Ah, got it. For anyone else who reads this thread: I went into the main Editor section, clicked on Stylesheet and changed my hex color in bold below:

}

.blog .entry-title, .archive .entry-title, .search .entry-title, #sidebar .widget-title, .todocontenido .widget-title {

background-color: #newcolor;

Thanks again for all of your help, ceslava. You went above and beyond!

Success!! Thank you so much for troubleshooting this, Ceslava.

The only unresolved question (and then I’ll go away!): Can I change the background color of the post headers? From my home page, the post headers (like “Broiling: The Upside Down BBQ”) are still in blue. I’d love to change that to be similar to my navigation bar.

I added the last bit of code that you provided (div & g t; ul & g t; li), and the navigation bar/post headers are still blue.

Here’s what I have in my Custom CSS:

/* navigation bar background */
#site-navigation ul {
    background: #ffffea;
}

/* navigation items background */

#site-navigation div & g t; ul & g t; li {
    background: #ffffea;
}

/* navigation items hover background */
#site-navigation li:hover {
    background-color: #ffffea;
}

/* center navigation items  */
#site-navigation ul {

    width: 100%;
}

#site-navigation div > ul > li {
       display: inline-block;
    float: none;
}

Thank you so much for working on this with me.

Thank you for your patience. So how do I correct this mysterious typo? Do I just copy & paste the latest code that you provided into my Custom CSS area? (That didn’t seem to work just yet, though). Where do I type in my actual color codes?

Not sure whether I should be changing code in the Editor page or just redoing the Custom CSS. Sorry for being so dense. I’m so new at this.

Hmmm – still isn’t working. Can you check my Custom CSS Code again? I copied and pasted what you wrote (substituting #000000 for all colors, just to see where it’s working), and nothing really changed. The menu/post headers are still blue, and menu is still left-aligned.

Any thoughts?

Thanks so much for helping me out with this.

Cjcornell2 – so, so helpful. I’ve been looking for this for awhile. Many thanks!