Streaming live at 10am (PST)

Responsive Presentation Not Working


#1

Yes I have watched the tutorials, but I'm still not "getting it". Site is barely started bc I have been struggling with this issue for some time ... Presentation looks OK on desktop but goes crazy in tablet or phone view. Do I need to set up a separate class for each element for each viewport? Example: logo would be X size with X padding in desktop, and logo would be Y size with Y padding in tablet, and logo would be Z size with Z padding in phone. Is this how it's done?

Also, why can't I style the type blue in my navigation bar?


#2

No, you don't have to set up a new class for each view, but you probably will need to assign new attributes for the class for whichever view you're in.

Since you didn't provide a sample link, I'm just basing this on assumptions. Here's an example that maybe will help you "get it." smile

Let's say in desktop mode, you have a headline font (assigned class: "headline") that is 72px and is centered on one line and has a top-margin of 200px to push it away from the top. Positioning looks great.

When you go to your tablet mode, the top margin has pushed it too far down the viewport, and now your text is too big for the screen and pushed onto three lines that are too close together. It all still has a class of "headline," but you need to adjust your font size and margin (and possibly your line height) to make it look good in that particular viewport. Let's say you change the font to 60px, and maybe adjust the line height, with a new top margin of 100px, and it looks great.

You didn't assigned a new class. They both still have a "headline" class, but the attributes at the different breakpoints have changed. Webflow writes this code for you and remembers it from break point to break point (the points at which the desktop switches to tablet then to landscape phone then to portrait phone).

Same thing happens when you go to phone view, you'll have to make attribute adjustments for the "headline" class, but you don't have to assign a new class.

Here's something important to remember... the attributes you make on the desktop view "flow down" through all of the viewports to the phone view. If you change the tabet view, that change flows down to the phone view as well, but the desktop view retains its attributes. Just remember, the attribute changes flow from largest to smallest view, but they don't flow up.

Hope this helps and makes sense. Good luck!


#3

Apologies for forgetting to include the link:

https://preview.webflow.com/preview/mddelifoods?preview=cfb5681059415c88c477782e927c9154

I appreciate your response, but if I understand you correctly, instead of a class for each element, I am essentially assigning an id (what you call attributes). So I'll have a separate id for the occurrence of the logo in desktop, a separate id for the logo in tablet, and a separate id for the logo in phone. This is what you advise? When I watched the tutorial on navbars, it did not work this way. The guy set up one navbar and it automatically resized for each viewport.

Also, what am I doing wrong -- I cannot change the color of the letters in my navbar.

Thank you!


#4

hi @GhostTrain.

It looks like you need to re-create your navigation. Do this by dragging a nav link over to the top of the body page. Also please remember %'s on widths as this is the best way to create everything where it will resize responsively.

Also please remember to work large to small when doing your designs. Webflow has this drafted perfectly and trust me once you get the hang of it you will absolutely love Webflow and what the team has done for us designers.

If you need help further please let me know by doing a @seank

Your Friend,
SeanK


#5

Hi, Sorry to just now respond. I got busy yesterday.

No, you don't need to create new IDs for each element. An ID is just that, an identification for an element, and you can only have one ID for an element on each HTML page. It's a unique identifier in the structure of your site. It's generally used for navigation of some sort... often, using anchor linking.

Classes are identifiers as well, but they are not unique. Several elements can be tagged with one class. And as I said before, you do not need to name your elements with different classes nor with different IDs for each viewport. As a matter of fact, changing the class and/or ID is really going to mess things up. Assign a class to each element, and then only change the attributes for that class for each viewport. The attributes are the things like font size, font color, position, width, height, etc., and these attributes are assigned to classes which are assigned to elements.

If all of this is a bit confusing (and I'm sure it might be if you're not familiar with how CSS works), you'll want to read up on CSS before you start trying to build a site in Webflow. It is definitely easier than writing all the CSS code, but you still need to have an idea of how to structure and assign classes to a site's elements.

I didn't really see a nav bar in your design, at least, not a nav bar in the traditional sense. I was able to change the letters "home" "about us" and "product line" if that's what you're talking about. I just clicked on the text and then changed the font color.

Hope this helps.


#6

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