Responsive stream/blog template
I know that the coffeecup stream is not responsive right now and they do want to change it soon, but is there a good way to embed blogger posts into a website responsively?
I also copy/pasted the code into a text editor so it was easier to see and work with.
If you use Chrome's or Firefox's web-dev tools, it makes it easier to find the CSS rules to edit.
Anyway, find things that have a set pixel width and change them to 100% (or 96% for a bit more wiggle room).
You can also change font sizes to ems or rems instead of pixels.
When you place your Stream on your site, let the <div> determine the width. So, you might have a <div class="my-blog">
that spans 6 columns, for a 12 col grid, it would be half the page. You can adjust it with media queries just like anything else.
Do you have an example of this? What is used in the padding/margin areas?
Scroll below the first paragraphs. Pardon the old decrepit content, the site is being redesigned so I've pretty much abandoned this one.
I used the Paperboy theme because it didn't have a lot of colors/graphics to deal with. Making the main content sections 100% width allows them to resize, the text within them then wraps as the container gets smaller.
margin: 0 auto; padding: 24px 0 7px 0;
/* // Main Container ----- */
margin: 0 auto;
This is all the CSS for positioning the Stream on the page:
Do you know how to have the container change its length so it can hold all the text as it becomes longer?
I'm glad to see you got it figured out!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.