Streaming live at 10am (PST)

Virgin Webflow person in need of help - Please!


#1

Hello Forum,

I guess this is considered a General all over the place question. I purchased the Template Columnism and am pleased with it but am having some problems with tablet, phone landscape and portrait views.

(1) crowding - is this padding or margins?
(2) lost navigator bar - where does it go?
(3) overlapping - is this padding or margins?

Okay, I have visited the tutorials again and I want to confirm that I understand the "media device" editing process. Please confirm: Do I have to change the "class" for each item before I edit in the phone or tablet view? Because...when I try to edit now it does change my computer view.

https://preview.webflow.com/preview/rexdentonjrcom?preview=db300328ce793e6f7609efea4fd59373

Also, I will view the form information but wanted to know if forms have to go to a url and not directly to your e-mail. I will study on that as well.

Thanks so much I am one desperate pupil!

Anita


#2

No you don't need to change the class before editing for the different media breakpoints. You DO need to keep in mind that breakpoint edits are going to impact the last class. So if you have two un-nested classes like Large and Purple assigned to an element and you want to change the Large class to be 50px wide on tablet then you will want to remove the Purple class from the element make the changes to the Large class and then re-add the Purple class. Or at least that's how I handle it.


#3

Thanks for your help jdesign,

I appreciate your advice. I need to learn more about nested and un-nested. Will having un-nested groups affect my overall look or are they just beneficial if you want to copy and paste. Do you know what tutorial they are featured on? I remember a brief example on one about copying.

Thanks again,
fordsvilleweb


#4

Both will affect the overall look. A nested class is applied to the previous class so if you see "Header 1" and you add "Large" then " Large" is a nested class of "Header 1" so you couldn't apply "Large" to "Header 2" but if you are clicked on an element and remove "Header 1" create "Large" then remove "Large", re add "Header1" and re add "Large" then the element will have both classes applied and you can use the "Large" class with any other Class. There are good use cases for doing it both or either way. Personally, I use individual classes for larger sites and more specific classes for smaller or more highly detailed sites.

@vincent Might have some advice on class structure in Webflow. He has been using the product longer than I have and typically offers some pretty solid advice.


#5

I've finally adopted pretty much the same habits I had when I was manually writing markup and styles. Habits that made the code solid and cross browser before, and work as well on webflow, making your designs easier to build and maintain. So here are some basic tips:

Never be afraid of nesting. Nest a lot. A long time ago designers learnt not to put to many properties on one element. Like dimensions margins and padding. Rather, it was better to nest several elements. Ended up with much less errors with the box model (how browsers calculate size of elements).

Don't mind too much adding a lot of classes. Unless you're working on templates for a big CMS or a website with very high traffic, you're not going to optimize the site by having this super clean, smart and compact structure. I'm not saying don't make it clean, but don't be afraid of class surcharge. Result is what counts. You can always rebuild a section in a cleaner way and clean the unused classes.

It's often unrealistic when a site is a one man job to have everything right. Structure, markup, SEO, classes, it's very demanding. So instead of spending too much time on what is behind, make sure the front is correct, doesn't break accessibility rules, that your HTML5 structure make the minimum of sense (declare nav elements, footer, header, sections and articles, plus the H hierarchy, and it's already great) and that your design makes sense: don't hide a 15 items and 3 levels primary menu under a hamburger icon, use real phrases for real people to explain stuff, use the interactions and motion as a tool for the visual hierarchy of things, to bring attention, rather than entertain... all the common sense stuff you can easily forget when you're playing with such an easy tool Webflow is smile


#6