Responsive stream/blog template

User 2835277 Photo


Registered User
7 posts

Note: This is probably in the wrong spot.

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?
User 271657 Photo


Senior Advisor
3,816 posts

You can edit your Stream to make it responsive. Choose hardcore mode. Copy all the code and save it so you can start over if needed.
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.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2835277 Photo


Registered User
7 posts

Hi paintbrush
Do you have an example of this? What is used in the padding/margin areas?
User 2835277 Photo


Registered User
7 posts

I tried some changes but it does not seem any different

http://www.cwebdesigns.org/stream/
User 2835277 Photo


Registered User
7 posts

Link to website blog page

http://www.cwebdesigns.org/blog.html
User 271657 Photo


Senior Advisor
3,816 posts

Collin, you can see a responsive example here: http://callendales.com/blog.html
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.
.sdrive-stream-site-title-contents { /*-- Set width to 100% --*/
margin: 0 auto; padding: 24px 0 7px 0;
width: 100%;
position: relative;
overflow: hidden;
}

/* // Main Container ----- */
#sdrive-stream-container {
margin: 0 auto;
width: 100%;
}

This is all the CSS for positioning the Stream on the page:
.stream {
float: left;
width: 100%;
margin: 1em;
}
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2835277 Photo


Registered User
7 posts

That worked for the text resize! thank you
Do you know how to have the container change its length so it can hold all the text as it becomes longer?
User 2835277 Photo


Registered User
7 posts

I got it working, I needed to change the height value to 100% rather than relying on padding to do so. (I was using the div class script found on CoffeeCup for Google Maps)
User 271657 Photo


Senior Advisor
3,816 posts

Sorry I've been behind at work... CC's a big distraction :D
I'm glad to see you got it figured out!
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

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.