stuck again.... container/flexbox...

User 566707 Photo


Registered User
81 posts

Hi guys

Well.. my offer to build a website for a friend seems to be a never ending story ;-( I am stuck again.

The problem:

* on the page "nieuws_facebook" I tried to build 2 columns next to eachother
* 1 with a facebook live feed, 1 with news items

It looks OK on a wde screen but since the facebook width =600 the columns appear over eachother on smaller screens. Ofcourse I changed it to get the two columns/containers below eachother on even smaller screen sizes but WHY are they not staying next to eachother, on somewhat wider screens? Why doesn't the right column gets a little smaller as usual?

Secondly: on the smaller screens I would like to start with the news and have the facebook feed below that. I tried with the order 1 and 2 to accomplish that. but I did not succeed. Can't I order the containers? Is it because they are in two seperate columns?

Eh.. third: I want to add more news items in the container on the right. Is it possible with paragraphs below eachother? I struggled getting the paw image and small header duplicated for a new news item again...

The project is here: https://www.dropbox.com/s/j1ruxbj0o9tbl … 2.zip?dl=0

Help is very much appreciated. I don't seem to get the hang of getting stuff where I want it to be.

Thanks!!
User 566707 Photo


Registered User
81 posts

No one able to help me out here? Or suggest a solution which I can try to work out further?
User 188640 Photo


Registered User
895 posts

Max,

I have been looking at your file this morning but have run out of time. I will come back to it later this morning.

One of the things you mentioned is the news feed not sizing down. Actually it does size down, it's the iframe that doesn't do that. I put a 600px wide image in without the iframe and it works fine. I haven't gotten to the order part yet and maybe someone with enough time will come by and help.

I'll have to look at it later.

Isn't it nice when a friend wants you to build a 'simple' website? :D
A Rose is Just a Weed in a Corn Patch!
User 566707 Photo


Registered User
81 posts

@ ernie: thanks for looking! I indeed also added a 600 px image there and it worked fine. i found out several things meanwhile: the facebook iframe is 500 pixels width. So my 600 conatainer made things worse. I meanwhile am a lot further (just over the past 2 hours haha) and I will post the new project this evening. I also managed to copy the paw plus small header on the news of the left container. So... wait for me :-) I will post my new project soon ;-)

User 2706435 Photo


Ambassador
444 posts

There is no file at the dropbox link anymore. But try this:
<iframe src='http://alistapart.com/article/responsive-web-design/' style='border:0'></iframe>

that suggestion is from http://embedresponsively.com/
User 2706435 Photo


Ambassador
444 posts

http://www.coffeecup.com/help/articles/responsive-google-maps/ The method for these maps should be similar to other sites.

When in the embedresponsively website - click the embed button, and it will output code like what Coffeecup used in this example. I mistakenly posted the wrong code, and not the output code in my previous post. You may have to make changes to the ratios of the width and height in the code, and even the bottom padding of the element.

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.