I have had the same template for my blog for like 7 years now. Google doesn’t like it because it’s not mobile friendly. I have been trying to slowly update it, but this is more of a general question for you guys who are all way better at this than me.
I want my site layout similar to Jeff Atwood’s blog. I have a fixed width logo for the sidebar, which will have the menu and some social links, maybe some recent tweets or videos, and the rest of the page will be content. Below the sidebar and the content, I want the page to be white for the comments section, because Disqus’ dark theme looks like crap.
I think this is somewhat of a decent layout, but one of the issues is that my logo looks HUGE on mobile. Can any of you give me some tips/pointers/help on how to fix this or tell me what you think of it? I’m all ears and I just want to get something that’s nice looking and doesn’t make people run from my blog in horror.
PaulOB
May 22, 2016, 12:41pm
2
I would use a media query and set it smaller and centred.
e.g.
.logo {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUUAAAErCAIAAADG6AYgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkM4QTUyN0QxMzYyNzExRTQ4Nzc4QzYxMTAwM0JCQjY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkM4QTUyN0QyMzYyNzExRTQ4Nzc4QzYxMTAwM0JCQjY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QzhBNTI3Q0YzNjI3MTFFNDg3NzhDNjExMDAzQkJCNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QzhBNTI3RDAzNjI3MTFFNDg3NzhDNjExMDAzQkJCNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz78p83aAAAYWklEQVR42uyd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") no-repeat top center;
background-size: cover;
background-position:50% 50%;
margin-left: -15px;
margin-right: -15px;
padding:100% 0 0;
}
@media screen and (max-width:767px) {
.logo {
max-width:400px;
margin:auto;
padding:50% 0 0
}
}
The padding top on the logo div creates the space for the image to appear while maintaining a relationship between the width. I would also remove the resize script as that makes the page feel ‘clunky’ even though you are using smart resize.
If all you want is an equal column effect then come out of the bootstrap grid and use display:table and display:table-cell for automatic equal height column colours.
Thanks, I will look into those. I agree that the resize thing is clunky but I didn’t know of another way to get even height columns.
system
Closed
August 23, 2016, 1:21am
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.