[jbergen]

Hi,

I would add .entry {border: none !important;} to your media query for max-width 800px. That media query is found in style.css, line 1441. I've copied below what the media query will look like after adding the rule to remove the border. Note that I had to add !important to the rule because the code you added for the border was at the end of style.css, and that would have overridden this rule.

@media only screen and (max-width: 800px) {

	body {
		background-color: #fff;
		font-size: 16px;
	}

	.site-inner,
	.wrap {
		padding-left: 5%;
		padding-right: 5%;
	}

	.archive-description,
	.author-box,
	.comment-respond,
	.entry,
	.entry-comments,
	.entry-pings,
	.sidebar .widget,
	.site-header {
		padding: 0;
	}

	.archive-pagination li a {
		margin-bottom: 4px;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

	.sidebar .widget.enews-widget {
		padding: 40px;
	}
	
	.entry {
		border: none !important;
	}

}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

How about adding this to style.css:

article {
    border-bottom: 1px solid #C8C8C8;
}

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

This one was tricky. I was able to get the site title to come forward with this addition to style.css:

h1.site-title {
    position: absolute;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

Here's what I added to style.css:

.footer-widgets .widget-title {
	color: red;
	background-color: #000;
}

.footer-widgets p {
	color: #eee;
}

.footer-widgets .entry-content {
	background-color: #000;
}

.footer-widgets .widget-wrap article {
	padding-bottom: 0 !important;
}

And here's the result:

I hope that helps!

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

There are three CSS changes you can make to get the buttons to look more like they do in the Executive Pro theme:

style.css, line 905

.news-pro-home .content .genesis_responsive_slider .flex-direction-nav li a.prev {
    background-position: 0px 0px;
    left: -25px;
}

style.css, line 913

.news-pro-home .content #genesis-responsive-slider .flex-direction-nav li a.next {
    background-position: -50px 0;
    right: -25px;
}

style.css, line 837

.news-pro-home .content #genesis-responsive-slider, .news-pro-home .content .genesis_responsive_slider .slides li, .news-pro-home .content .genesis_responsive_slider .flex-direction-nav li {
    padding: 0px;
    max-width: 700px;
}

That will give you this:

As far as displaying the post's text, I'm not too familiar with that theme, so you might want to re-post your second question.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

1) To move the content text away from the left edge, you can change padding-left to 40px. I chose 40px because that's the amount of padding on the right side of the content block.

style.css, line 474 (change last line):

.content-sidebar .content {
    border-left: medium none;
    float: left;
    padding-left: 40px;
}

If you only want this to happen in smaller browsers, you can instead add this rule to the appropriate media query.

2) It looks like your menu goes to hamburger at a browser width of 1200 px wide. If you really want your sidebar to disappear, you can add display: none; to that media query. You'll also want to tell the content area to be 100% to fill the width of the screen:

style.css, line 1630 (add the last two rules):

@media only screen and (max-width: 1200px) {

    #responsive-menu-icon {
        margin-top: 20px;
    }

    #menu-main-nav {
        margin-bottom: 20px;
    }
	
    .sidebar-primary {
        display: none;
    }

    .content {
        width: 100%;
    }
	
}

If you simply want your sidebar to display below the content (and not disappear), you can change it to width: 100%; in the media query for 1200px:

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi,

One way to fix this is to change the widths of the content and sidebar to percentages rather than px widths.

I changed the content to width: 68.2778%; and sidebar to width: 27.0833%; and the sidebar stopped dropping to the bottom at 1200px wide.

style.css, line 1612:

.sidebar-primary {
    width: 27.0833%;
}

style.css, line 1607:

.content {
    width: 68.2778%;
}

Now the columns will shrink slightly as the browser gets narrower, and the sidebar will go below the content at screen widths <= 960px.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Good question! In fact, it's a very important question if you want to protect your CSS customizations when you update your theme.

Here's a video that gives step-by-step instructions for making a custom CSS file to which you can safely add your CSS modifications.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I'm guessing you want to add clear: both; to the CSS rule for your h2 headings.

This is what that looks like:

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Your page is looking good! So I took a look, and I decided that an easier option than using "one-third" is to just add a media query to adjust the width and margin of the .portfolio-featured-image class on small screens.

This is what you'll add:

.portfolio-featured-image {
    margin: 0;
    width: 100%;
}

And you'll add it to the media query for screen widths up to 480px. So the adjusted media query will look like this (style.css, line 2853):

@media only screen and (max-width: 480px) {

	 body,
	 .home-featured .home-widgets-1 {
		 font-size: 16px;
 	}
	
 	.header-image .site-title > a {
	 	background-size: contain !important;
	 }

	  .header-image .bumper {
		min-height: 180px;
	}
	
	.portfolio-featured-image {
		margin: 0;
		width: 100%;
	}
	
}

Here's what it looks like before the media query adjustment:

And after:

---

Jamie @ Ladebug Studios

[jbergen]

If you can't see the new file in your Editor drop down menu, my guess is that you'll have to edit the file itself and transfer by FTP. You can also follow up with Matt on his blog.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Do you mean the menu text (Home, About, Graphics & Design, etc.)? The shadow for the menu text is in style.css, line 899.

The current code is:

.site-header {
    text-shadow: 1px 1px 1px #000;
}

I'm not sure how you'll make it darker since it's already set to black.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Simone,

I tested your site in a couple of different IE 11 configurations in BrowserStack (Windows 7, IE 11 and Windows 8.1, IE11), but it looks the same as it does in Firefox to me.

Here's IE11:

Here's the most recent version of Firefox:

If you want to sent a screenshot of what you're seeing, go to tinypic.com and upload the screenshot as an image. Then copy the direct link for layouts and use the img button to create the image in your post.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I'm glad you've got the FREE banner where you want it! Also, I took a quick look at your site and noticed that the alignment of thumbnails was off. To fix that you'll want to add the "first" class to the first thumbnail image (<div class="portfolio-featured-image first alignnone"> ).

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Hi Sue,

Great! I hope things look good for you tomorrow when you check it in IE8! (I think it should.)

Also, this video gives a very helpful step-by-step tutorial on how to make that custom CSS file.

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Just change the color specified in the box-shadow (in the rule starting on line 1188) to a gray - like #707070.

This link gives hex codes for different shades of gray you can try.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I'm not sure how to help because those CSS rules did reduce the space below the widgets you specified when I tried it with my developer tools. If you want to reduce the space some more, you can add:

#featured-page-8 {
    padding-top: 0;
}

Also, here's a nice explanation of why you might want to add your custom CSS to a separate file. It's not required; it just makes it so that you don't lose your customizations if you update/replace your theme.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I would just completely remove the 1196 rule (1196-1204). Then the 1188 rule will make the lines look normal.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

Got it!

In that case, you'll need to wrap the banner around each video thumbnail individually. I was able to get that using this HTML for each thumbnail:

<div class="portfolio-featured-image alignnone">
    <div class="free-banner-wrapper">
        <div class="free-banner">
            FREE 
        </div>
    </div>
    <a href="http://www.codingnewbie.com"> <img scale="0" src="http://codingnewbie.com/wp-content/gallery/video-cover-images/Tutorial-2-Hello-World.png" alt=""></a>
</div>

And this CSS:

style.css, line 2404 - note addition of position: relative;

.portfolio-featured-image {
    overflow: hidden;
    float: left;
    margin-left: 2.5641%;
    position: relative;
}

style.css, line 2345 - change to top: 0;

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

The reason you're adding "position: relative;" to .portfolio-featured-image and wrapping that around the banner is because that will make the banner wrapper (which has "position: absolute;") position itself relative to the thumbnail. Only slightly confusing. 😉

This is the result - I just did one, but you can do the others the exact same way:

Also, I'm not sure what you want the banner to look like, but if you remove "position: absolute;" from .free-banner, you'll get this:

I might also recommend using a "one-third" column class for your video thumbnails so that they stack nicely (and don't shrink as much) on smaller screens. You can follow up with me if you want to do that.

---

Jamie @ Ladebug Studios

[jbergen]

I looked again, and when I added the following rule to style.css, the space was reduced below the "What is LKP?" widget. Do you want to remove more space?

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

To reduce the space below the "Find Everything Here" widget, I would add this rule to style.css:

#featured-page-8.widget {
	padding-bottom: 0;
}

I'm not sure why that didn't work for you, but let me know if the issue is that you want to remove more space. Also, I would recommend adding any custom CSS in a separate CSS file rather than style.css so that you don't lose your customizations when you update your theme.

Jamie

---

Jamie @ Ladebug Studios

[Author]

Posts