One page responsive design ... from a NOOB

Design help General
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.

1 Like
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

2 Likes
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.

1 Like