Streaming live at 10am (PST)

One page responsive design ... from a NOOB


#1

This is a one pager ... I'm new to doing CSS on my own and I don't want to write 1000's of lines of CSS.

I am a programmer trying to break into web design and webflow promises to be my ticket.

The problem is I seem to have a larger view port than what I'm designing for so that phones and other smaller device types can scroll when there is not content to the bottom or left.

Here's a public read-only view of my site ... I"m only concerned with the page "beta" ... for now.

https://webflow.com/website/virtuola#

Any help is appreciated greatly !!


#2

Can you try to re-explain the issue.

I don't understand the issue.


#3

Sure. If you look at ... http://virtuola.webflow.com/ ... on a phone ... it looks ok, but it scolls horizontally, which I don't want.

Then when you scroll vertically ... the image does not take up the back ground and there is simply too much vertical space ... beyond the intended length.

Try that ? Ok ?


#4

Disable overflow in MainContainer.

Might as well disable it in white_background as well.

Currently... you have overflow disabled in the Body.


#5

I'm reviewing those changes ...


#6

That did wonders for the horizontal scrolling ...

now there seems to be an issue, on a phone, that I can't scroll down to the bottom of the design where the "Sign Up" button is.

We're getting there ... it sounds like I should completely blow away the design and start from scratch.

What your recommend as the key ... mistakes and best way to start a design like this ??


#7

your structure is a bit off

move the navbar outside onto the body.

add SECTION below the navbar.

give the SECTION a class name

move the container (MainContainer) into the SECTION.

body
-> navbar
-> section
--> maincontainer


#8

You are a life saver ... absolutely ... I named the section "plain_navbar" moved the important elements out from navbar and blew that away.

That main_container is gone ... just sections and stuff inside.

That main_container had a fixed width ... what kind of object was that ?

I'm re-building ... I'll ping you when I have a new build.

@Revolution you have been a tremendous help and saved me some money as I was about to hire someone to help me.


#9

What do you think now ?

Why doesn't the white background show up under the desktop media query ?


#10

I decided to hire someone with no means I need a lot of help and I want to get all my questions answered and this is a paying gig so @Revolution you've been amazing.


#11