Pinboard: A few tweaks for Slider & Mobile display

I just installed Pinboard & really want to thank One for putting this out there! As I was setting it up and tweaking it in for my use I’ve wanted to do the same as some of the common posts on these forums, so I thought I’d share what I’ve done in case it may help someone else down the road. (Remember: sharing information is the true cost of free software!)

I’m not using any sidebars so that may affect anyone else’s use of these tweaks. Feel free to view the results on my site: Red Binary Of course any and all feedback is welcome!

For my use the slider had too much height & I want to use any old feature image without worrying about formatting it. The start of these Slider tweaks were in another post here in this forum. Anyhow, my changes to style.css:

I limited the height of the slider to 250px

.slides {
	width:100%;
	max-height:250px;
	overflow:hidden;
}

This meant I had to change the placement of the text on the slider from a top of 32% to 10%

#slider .entry-title {
	display: none;
	position:absolute;
	top:10%;
	right:0;
	z-index:1;
	float:right;
	float:right;
	margin:0;
	font-family: "Open Sans", sans-serif;
	font-size:36px;
	line-height:1.62em;
}

I added a new property for the slider images to offset the cropping of the image so that it wasn’t showing the top of the image

#slider img {
	margin:-150px 0 0 0;
}

Next, I wanted the site to be full-width on the screen.

I changed the hard-coded px max-width to 100%

#wrapper {
	position:relative;
	max-width:100%;
	margin:0 auto;
	box-shadow:0 0 18px rgba(0, 0, 0, .4);
	background:#f8f8f8;
	overflow:hidden;
}

Lastly, I like the mobile responsiveness a LOT and didn’t want to lose it by removing the viewport meta tag as others have done. It looked great on every smartphone regardless of brand or screensize. It also looked great in landscape on tablets, but in portrait it was condensed to a 1-1/2″ strip down the middle.

I changed the width at which the condensation occurs
@media screen and (max-width: 620px) {

…and I replaced the wrapper limit of 380

#wrapper,
.page-template-template-no-sidebars-php #wrapper,
.page-template-template-blog-no-sidebars-php #wrapper,
.page-template-template-portfolio-no-sidebars-php #wrapper {
	max-width:100%;
}