Streaming live at 10am (PST)

Styling my website in smaller views like portrait, landscape


#1

I have a couple of questions about styling. 1) Images (not background) I notice if I size them other than on the desktop the desktop size changes as well. 2) It seems that my Heading and Text elements on my Desktop are affected when I change margin in Landscape, etc.
Do I need to put everything in a Div. Would that help? Seem to be getting nowhere as when I fix one device type another is fouled.
Also, I notice that the images on my project don’t auto size to fit the device size. For example, I am in portrait and am styling for the smallest size. Then I expand and the images stay to the left of the viewport. http://autoworks2.webflow.io/
Thanks
Rob

Not sure why I cannot find the location for my read-only link but here it is:
https://preview.webflow.com/preview/autoworks2?utm_source=autoworks2&preview=5a08445f793e782fb743d0d1bb06f0d7


#2

There are two main ways to style and size an image element.

  1. using the settings tab
  2. adding a class and styling using the designer

The settings tab allows you to set either set height, width, or both. When you use your mouse to drag the lower right handle of the image larger and smaller, you are NOT affecting the styling to the class of the element. You are affecting its SETTINGS. Important to know because this is independent of an elements class.

The second way is to assign a class and/or subclass and assign width and height using values in the editor including minimums and maximums and taking advantage of the full range of unit measurements like vh, em, %, etc. Settings allows you to set the size in pixels. If you assign size in a CLASS however, it OVERRIDES the values you assigned it in any settings.


#3

This will help on your other issue. It’s takes many hours but watch all 119. Serious. When you’re done, play with the designer until you give up again then Rewatch them all again. You’ll know why when you do this. It’s amazing how much more I personally picked up the 2nd time


#4

Damn, that’s a lot. Well no time like the present, so much for yard work, lol. Could that be throwing off my text and headers? Not wanting to change the subject but I noticed in the designer I thought I finally lined everything up. Today I published the site and what appears in the Designer is not what appears on the published site. So how does that happen. No way to edit this out that I can see. Perhaps getting the pics right is a good starting point. Very weird. If you want to have a look here is my super secret link: https://preview.webflow.com/preview/autoworks2?utm_source=autoworks2&preview=5a08445f793e782fb743d0d1bb06f0d7
And here is the published site: http://autoworks2.webflow.io/
Thanks


#5

Haa Haaa, very funny, you must have made these videos. Or you have been watching them to many times and have inherited his humor. Which I like by the way. Always a pleasure to watch.
Ok, your were right, this really, really helped. So I’ll go set the class for the pics as the same and give them a % with a min and max. Seems right, right?
Thanks again


#6

They’re possibly my all time favorite YouTube video series ever if not the top educational crash course ever. He’s FAST, funny, and does the presidential “Here’s what I’m going to say. Now I’m saying it. Here’s what I just said” format and doesn’t waste time.

I looked over your site and it looks like you have a GREAT business! After trying Squarespace and Wix and unhappy with the control and capabilities, I went with WebFlow. I used to love to program… that was in the 90’s. I’m re-learning everything and it’s a hell of a learning curve, especially if you’re the one guy who’s got to do the front end, back end, design, photography, social media integration, digital marketing calendars, legal and compliance, and user feedback and research… especially if you don’t know the difference between Java and JavaScript languages for instance.

Here’s what I would recommend considering:

Because you already have some solid content, and good idea of your site structure, and it seems you know what you want, you could go a couple ways… 1) keep going at it the way you are and you’ll pick it up. It takes 10,000 hours to fully master anything. 9200 of those hours are learning how NOT to do things. Sounds silly but it’s true. I enjoy getting it wrong because I like designing and programming. If you’re on a time crunch, need a return on investment sooner, or not into it then 2) consider hiring a freelancer who can use your existing content to create a solid 1-pager PLUS an additional template you can use for new pages that you can copy and edit at your leisure after it’s structured in a more consistent way.

The videos will help… and with Google Chrome and the Tape 2.0 Extension from the Chrome Store (to measure the screen and element spacing) you can LITERALLY use webflow to copy any design you see on the web as your own template. PM me if you have any specifics that come up.


#7

Thanks Don’t Poop, I mean pop, I just said that. OK, so I tried to copy the video narrator, fail? Thanks for the reply, I agree it takes a long time. I have been at it off and on and I notice that if I am fully involved for say a week at a time with few outside interests or distractions I do well. It’s when “Life” intervenes that causes a break in focus on the websites that get me in trouble and I have to “refresh” via videos and this forum. I really appreciate your feedback since you mentioned a couple of things I had not heard of.

  1. I thought I had to build Webflow Sites in an Incognito Mode?
  2. Extensions aren’t available in Incognito Mode
  3. What is Tape 2.0? Sounds bad ass. I’ll double check my extensions on chrome, add it and play with it.
    For now I think you have answered my question and I think I figured out what I did wrong. Mastery is key, once we have mastered what we now are confused by life gets easier, duh, right? lol

#8

Hiring an experienced web designer/builder is a solid idea with my business model. What can I expect to pay for a site say 5 pages. Home, About Us, Contact, Blog (That I update), and another yet to be decided
Thanks again dont-pop


#9

Hi, @rjbiccum, just from my experience, it can range from $1500 to $3-4k. Will you be providing the content, like copy, images, etc? If so, that will cut down on costs. But don’t let it get to you too much. Avg for that size I have seen $1500 to $3k. Thats mostly a static site with no interactions.

Realistically, I would say about $2500 - $4000. But thats from my experience and my time. You might be able to find cheaper. However, I don’t do sites anymore for less than $3k. And they typical would be something for what you are looking for.

Hope that helps.


#10

Thank you Brandon,
Rob