Streaming live at 10am (PST)

Width Formatting Help


#1

I'm having an issue with my new website. I dont see any issue in the designer but when i test the site on a phone in a browser, either safari or dolphin (i have an iphone 6+) there is a black bar on the right of the screen and it goes away as i scroll down past the hero section. I usually can figure this stuff out but i cant seem to find the issue. Please help me out of this one!

Public share link below.

Thanks

Bill

Here is my public share link: https://preview.webflow.com/preview/ocean-and-snow-design?preview=1def72d8e57c4a052a451666b0ed1226
(how to access public share link)

The test site is live at http://ocean-and-snow-design.webflow.io/


Mobile Homepage Header not Full Width
#2

Hmm, both links are showing 404s.


#3

My Bad, try these

http://ocean-and-snow-design.webflow.io/

https://preview.webflow.com/preview/ocean-and-snow-design?preview=1def72d8e57c4a052a451666b0ed1226


#4

I fixed the links in the main post too.


#5

Okay. Whoa. This design is KILLER. So here's your issue:

Your scroll review animations have a starting point that's set off the screen. When loading your page, the mobile browser detects that there's an object 60px to the right (your starting point for the animation). Therefore, it's widening the viewport (or rather scaling the content) to accommodate the position of any object using this animation.

Simply set your Section overflow to "hidden." This will prevent the animations outside the bounds of your section from making the iPhone add extra room on the sides to accommodate.


#6

hugely offtopic but...

How did you create such a nice screenshot of your browser? It has dropshadow and everything :sweat_smile:


#7

Argh! I knew it would be something super simple!!!

Thanks for the kind words as well. Anything that would make it better in your opinion @McGuire


#8

I used the built in mac screenshot tool. When you hit Shift - CMD - 4 it gives you crosshairs to choose your grab. But if you hit spacebar after Shift - CMD - 4 or 3 it will switch to a camera and you just hover over the application you want a screenshot of and it will do the entire application (including the drop shadow)

I was surprised that included the drop shadow too!

Thanks so much

Bill


#9

If you're on Mac, these will change your life!!

CMD + Shift + 3 will take a screenshot of your screen and save it as a PNG to your desktop.

CMD + Shift + 4 will turn your mouse into a coordinate readout, allowing you to drag and select any rectangular portion of your screen, saving a PNG screenshot to your desktop.

CMD + Shift + 4 then spacebar, and clicking on any window (and some window elements!) will create and save a PNG screenshot of that window, including its shadow elements.

Edit: @oceanandsnowdesign beat me to it! :grin:


#10

Awesome! thanks for the swift reply.


#11

No problem. Love sharing tips


#12

Yea, use these every day. Now i have them linked to my dropbox too so i have them in one place not clogging up my desktop. One of the best keyboard shortcuts ever.


#13

@oceanandsnowdesign, I have a few thoughts, but this is by no means comprehensive.

1: Your connect with us section (the hover effect for the social icons) is just perfect. I guess this isn't a suggestion. Just an observation of something I think is glorious.

2: The hero top links and the hero paragraph text are a little thin on non-retina displays. It's not bad, but it's not super crisp.

3: The lowercase "a" at the beginning of your hero H1 stands out, and the word service is blue, which might make some users think it's a link when it's not.

4:The featured project looks AWESOME. The text KIRTON'S LANDSCAPE MAINTENANCE, though, is nearly invisible.

5: Also in the featured section, the button slides up on hover. This looks awesome on the small social icons, but on a large button, it feels like the button is evading the mouse on hover. To see this behavior, hover near the bottom of the button and move your mouse horizontally alongside the bottom few pixels of the icon. It bounces everywhere because the button (and therefore the hover area) is moving up.

6: Your work looks GREAT. Especially Cerullo Performance Seating. Great design. It would be great if you could ask some or all of those clients for testimonials, or at the least, a quick quote you could throw under each of those. Not necessary, but recommendations/testimonials are a huge part of making new clients/site visitors feel safe engaging your services.

7: I'm not sure it's necessary to explain that the hosting is on Webflow, and the phrasing is a bit odd. "Hosting on Webflow via their Tier 1 Content Delivery Network, Amazon Cloudfront and Fastly" makes it seem like their site is going to be hosted on three different things: (1) Webflow via their T1 CDN, (2) Amazon Cloudfront, and (3), Fastly. You explain what it IS but not what it DOES or WHY it's important to the client. What about uptime? Speed? Why is that important to them? The WHY here is critical.

8: The "Add Webflows powerful CMS to any plan for only $10 per site" thing is pretty ambiguous. "Learn more" is okay, but why would a client click that? Are your clients all familiar with the ins and the outs of a CMS? If you're going to keep it, add an apostrophe so it's "Webflow's" CMS and not "Webflows CMS."

9: Your how customers feel section is great! But I'm not sure why it is where it is. Wouldn't it make more sense to move it above pricing and below your recent projects? That way it's like (1) intro/welcome, (2) here is a featured project, (3) here's more of our work, (4) here's what our clients have to say, (5) here's what we charge, and (6) here's how to get in touch with us!

10: Your Services section is just dynamite. LOVING the graphics.

Edit:

11: The connect with us text at the bottom also looks like a link--that's the crazy thing about blue text. Website visitors can always mistake blue text for clickable links!


#14

Dude! Thanks for the thorough review. I agree with everything you said! Im hoping to get it launched by the end of the week. I'll defiantly use these tips. Im still pretty new to this process. Learning as i go. Made my first site less than 10 months ago so using webflow has been awesome.

Thanks again

Bill


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.