[jbergen]

For (1), it looks like you added another copy of the CSS rule I wrote in reply #122071 rather than just changing the existing code. So I would remove the code you copied onto line 1188 of style.css and just modify the code (currently on line 1196) so that it matches the code I suggested. Right now it looks funny because those two rules are conflicting each other.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I just realized you probably want the free banner above the red menu at the top. In that case, change .free-banner-wrapper back to top: 0px; and then add z-index: 1000; to that rule:

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
}

Was that what you were looking for?

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Happy to help! I'm able to recreate the image you posted by scrolling just a little ways down the page. When I'm all the way at the top, things look good and the banner is not clipped, but when I scroll down, the red menu bar collapses halfway, and then there is a gap between it and the New banner before it starts to overlap the New banner. Does that make sense, and is that the problem you're trying to fix?

Regarding the "entry-header", I do see something funny in your HTML markup. There's an empty "entry-header" element before the entry-content div that looks like this: <header class="entry-header"></header>. Then there's a second "entry-header" inside "entry-content" that does wrap around the Free banner markup. But it also wraps around the first portfolio-featured-image div, which I'm guessing it shouldn't. Maybe you can put the banner markup inside the currently empty header (the one before entry-content) and get rid of the second "entry-header".

I hope some of that made sense! Feel free to follow up.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Okay! I think I got it. The element is there, but it's hidden underneath the red menu bar. To fix this, make two tweaks to the CSS:

1) Change the .free-banner-wrapper rule to have top: 160px; as follows:

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 160px;
    right: 0px;
    z-index: 2;
}

2) Remove position: relative; from .free-banner:

.free-banner {
    font: 400 16px/1.1 "Oswald","Helvetica Neue",Helvetica,sans-serif;
    color: #FFF !important;
    text-align: center;
    transform: rotate(45deg);
    padding: 22px 0px 5px;
    left: 14px;
    top: -9px;
    width: 120px;
    background-color: #59B285;
}

Now the only issue is when the red menu bar collapses on small screens. You'll need to use a media query to adjust the absolute positioning of the New banner in that case.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

Each widget has a unique ID, so you can just add a new CSS rule that will point specifically to that widget. In your case, you can reduce the padding below the "What is LKP?" text widget with the following rule:

#text-11.widget {
    padding-bottom: 0;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Okay, just so I'm clear, did you go to Appearance -> Editor in the admin panel and edit a text file there? If so, which one did you add the HTML to? It will say under "Edit Themes" which file you're editing, and there's a list of files you can edit on the right.

The next question is where you want the banner to go. Often, you can find a hook in the Genesis framework that will allow you to insert the content in a specific position.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Simone,

Can you tell me which version of IE you're using and which operating system? I tried to reproduce the problem using BrowserStack, but I didn't see the problem you're describing. Can you also maybe include a screenshot in your next post?

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

Your HTML/CSS look okay, but where did you put the HTML? I looked at the HTML on your site and couldn't find it anywhere.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

My mistake. You actually want to replace the #featured-post-2 rule with:

#featured-post-4 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

For the lines on the sides of the titles, you'll want to modify the rule in style.css on line 1188. And you can't use a text shadow for that because it's a border. You'll need a box-shadow. Remove padding-bottom: 4px; and add box-shadow: 1px 1px 1px #000; and margin-bottom: 4px;. So it will look like this:

.agency-pro-home .content .featured-content .widget-title:after, .agency-pro-home .content .featured-content .widget-title:before, .agency-pro-home .content .widget_text .widget-title:after, .agency-pro-home .content .widget_text .widget-title:before {
    content: " ";
    display: inline-block;
    border-top: 2px solid #FFF;
    width: 15%;
    box-shadow: 1px 1px 1px #000;
    margin-bottom: 4px;
}

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I think what's causing the asymmetry in the border around your nav menu is this line: border-width: 0px 1px 2px 3px;

When I changed it to: border-width: 0px 2px 2px 2px;, it made the spacing on the left and right of the nav menu more even.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Where did you add the following? I don't see them on your stylesheet.

#featured-post-2 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

#featured-post-3 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

For "Recent Articles" you'll add this rule:

#featured-post-3 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

And for "Our Work":

#featured-post-2 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

Then make sure you remove the text-shadow: 0px 0px 1px #000; from style.css, line 772.

That should do it!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

I took a look at your site, and the widgets that I believe you want in your sidebar (simple social icons and search) seem to be in the home-bottom widget. Can you confirm that those elements are actually in your sidebar widget in the admin panel?

If I understand your problem correctly, then I wonder if the Instagram widget is messing things up. Maybe you could try to remove that temporarily and see if that fixes the problem.

Let me know if you want to follow up.
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Just a quick follow-up:
I was testing one of my sites on an old PC running IE8, and I remembered your post. So I went ahead and used the developer tools to add width: auto; to the style.css. That was indeed the solution; the image proportions went back to normal!

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Yohan,

To fix this, you just have to increase the z-index of .nav-primary as shown below:

style.css, line 1154 (add the last line):

.nav-primary {
    background-color: #000;
    margin-top: 20px;
    margin-bottom: 0px;
    text-align: center;
    width: 100%;
    position: fixed;
    z-index: 3;
}

I hope that helps!

---

Jamie @ Ladebug Studios

[jbergen]

Hi Sue,

Sorry you have to deal with this IE8 bug! They're no fun. I found this article, which describes your exact problem. However, they don't have a perfect solution for your case.

After experimenting with a few of my sites and reading the comments following the article I mentioned above, my best guess is that you need to add "width: auto" to your CSS rule for the img tag. In your case, the fix would look like this:

style.css, line 1209:

img {
    height: auto;
    max-width: 100%;
    width: auto;
}

And it's even better to add this new rule to a custom CSS file so that you still have it if you update your theme. Let me know if you want help with that.

Finally, I don't know if you need this, but here's a link to a website that will show you screenshots of your site in IE8 so that you can get quick feedback as you're testing: http://www.browserstack.com/screenshots.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I'm guessing you're entering your text in a widget, which limits your ability to change the HTML markup without going into the code. Sorry I didn't realize that in my previous reply - I've only built themes from scratch so far, and in that case it's easy for me to change the HTML markup.

Probably the best approach would be to find a unique selector for that specific widget and use it as the target for your new CSS rule. However, your site seems to be down right now, so I can't give you more specifics.

And you can add new CSS rules to the bottom of style.css but be warned that they will be erased if you update your theme. It's better to make a custom CSS file like I mentioned in reply #121124.

---

Jamie @ Ladebug Studios

[jbergen]

The CSS ID you added was correct - now it specifically targets the home tagline.

Now the problem is that the shadow behind the titles in the footer comes from the rule you added for .widget-title (style.css, line 772), which also gives the shadow behind the OUR WORK and RECENT ARTICLES titles.

To fix this, you'll want to add a new class to both of those titles and apply the shadow to that class specifically. I'll show you how to do OUR WORK, and you can do something similar for RECENT ARTICLES.

Change:
<h4 class="widget-title widgettitle">Our Work</h4>
To:
<h4 class="sub-section-header widget-title widgettitle">Our Work</h4>

And add this line of CSS:

.sub-section-header {
    text-shadow: 0px 0px 1px #000;
}

Note that I'm adding a new class to these elements (rather than unique ID's) because you have multiple elements that you want to style similarly. Also, I'll mention that it's a good idea to set up a custom CSS file to add these types of additions because, if you ever update your theme, you'll lose the changes you made to its style.css. Here's a video tutorial on how to make a custom CSS file.

---

Jamie @ Ladebug Studios

[jbergen]

Hi Julie,

One way to change that is to add padding below each list item. To do that, you can modify your CSS as follows:

style.css, line 1185:

.entry-content ol li {
    list-style-type: decimal;
    padding-bottom: 20px;
}

But be aware that any changes to your theme's style.css will be erased when you update the theme, so be sure to add your CSS changes to a custom CSS file.

I hope that helps!

---

Jamie @ Ladebug Studios

[jbergen]

One way to do that would be to change:

<h3>We bring ideas to life through thoughtful, creative design solutions.</h3>

to:

<h3 id="home-tag-line">We bring ideas to life through thoughtful, creative design solutions.</h3>

Then you would add a new CSS rule like:

#home-tag-line {
    text-shadow: 1px 1px 1px #000;
}

Your site's looking good, by the way 🙂

---

Jamie @ Ladebug Studios

[Author]

Posts