Mobile responsiveness – remove entry border

[mbsvendsen]

Hi!

I am using the Genesis Sample Child Theme. I have set the entry border to the following in style.css:

.entry {
border: 1px solid #cccccc;
}

http://www.treningsokt.no/?page_id=138

However I would like to remove the border when the site is viewed on mobile phones (but keep it on an ipad). I know it is supposed to be done in the media queries, I just cannot seem to get it to work by trial and error.

If anyone could help out I would be most thankful!

http://www.treningsokt.no/?page_id=138

[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

[Author]

Posts