Streaming live at 10am (PST)

Help me Creating a responsive mobile website


#1

hello everyone. i would like to make a website like this
https://answers.yahoo.com/question/index?qid=20140701133949AAvJAr9

I NEED TO CREATE A RESPONSIVE WEBSITE, LIKE THIS IN THE PICTURE.

HERE'S IS MY CODE.
HTML: http://hostcode.sourceforge.net/view/1922
CSS:http://hostcode.sourceforge.net/view/1923

I AM STUCK ON CONTENT PART. WHEN RESIZING, CONTENT 2 DOES NOT FIT ALIGNED WITH CONTENT1.

ALSO, THE SIDEBAR IS NOT FULL HEIGHT, AS IN THE PICTURE. I WOULD LIKE TO MAKE HER NOT VISIBLE ON MOBILE, ONLY WHEN CLICKING ON LEFT-UP OR LEFT-DOWN CORNER.

the question is: how to make this with webflow?


#2

Hi @elenderg You might achieve something like this for your design in webflow http://livehelper.webflow.com/just-a-layout That's for basic layout.

The elements structure is something like this

Try to share your public link or ask more if you need.

Cheers


#3

i have deleted my website here. the question is: can i add a sidebar to it?


#4

to have a sidebar as you can see on the link i attached on previous post, you only need to make a div and set it as fixed and set interaction to it. Check images below.

To make an interaction you click on + icon there and set a new name Toolbar (or anything you like)
There you need to make 2 interactions

1st is an Init that actually set your toolbar div into most left about 185pixel to left but since this Toolbar div has bigger width so few pixel still show on the screen. That part we can use to hover it so an interaction can be set to move it to right for some pixels.

and an interaction to move it to the right when we hover it

That's how I made a sidebar in webflow.

Cheers


#5

@elenderg Here you can use my public link to observe what I have made

https://webflow.com/design/livehelper?preview=64db81b7f9f1dcb5fe0be42d89a14d89

Once you open it in Read Only mode, Preview it

then click 'Just a layout' link

It should open the page layout then back to Design Mode

There you should able to observe all elements properties for that page.


#6

ok, did as you said. now i'm trying to do a sidebar like on this site: http://responsivenavigation.net/examples/simple-toggle/
any idea

obs: thanks for the help!


#7

@elenderg It needs few changes on page I made before. I will post it to you once I'm finish with that asap.


#8

@elenderg Check again this page http://livehelper.webflow.com/just-a-layout

Not really had few changes but some more but it looks much similar than example you gave. Purely made by webflow. No external css nor js used for it.


#9

ok, very similar to the example. try resizing your browser in that page. you'll see the sidebar collapses to a simple "hamburger" button. it is possible to do it with no javascript?


#10

and i think it's better with no hover...the toogle/collapse function should be when clicked only (for mobile)


#11

I suggest you have a look at here http://tutorials.webflow.com/ Webflow has provided extensive video tutorials there and also here http://help.webflow.com/websites-built-in-webflow that you can open their public links for your needs.

Good luck


#12

thanks! you helped me a lot


#13