Is there a reason why some items have a permanent style I can’t remove? I’ve tried adding and removing classes, but they have this weird default blue + underline that I can’t remove
This is just the default link style, but you should be able to override it. If you’re still having trouble, please provide your read-only link so I can look into it.
I sort of fixed it by changed the “All-Links” class! But I’m still having trouble with these two on my product page:
https://drinkrevyv.webflow.io/product/acai-berry-12-pack
I’m using FOXY for ecommerce and I’ve applied a specific class to the button and the cart but it doesn’t seem to be applying
Webflow automatically removes capitals in their class names, so just make sure the classes used in your embeds are written with just lower case letters:
Keep in mind you may need to adjust your styling as shown with the add to cart button. Let me know if you have any other problems.
Wow thank you so much! That worked beautifully! Is there a reason why the cart (0) is aligned to the bottom of the container unlike the other nav items?
I’d imagine it’s because the embed element is rendered differently than just the link block element. Without diving too deep into adjusting that, a quick fix is adding a new combo-class (ex: cart-link) and removing the top 20px padding which aligns it to the remaining links:
Genius! Thank you so much!
Sorry to bother, but an unrelated question.
My tabs render great on all resolutions except 1440px and up. And even on the 1440px and up, page 1 of the tab looks fine but pages 2 and 3 don’t for some reason
I can’t say for sure why the first tab is working properly while the others aren’t, although you’re giving the Product-About div margin: auto on either side causing it to shrink. Removing this fixes the issue:
1 Like
O how interesting! What does margin:auto do? Is that dependent on the content inside? Vs. Margin:0 means no added margins?
I’m a little confused about margins and also just sizes in general, especially when it comes to responsive. Everything looks great on my laptop, but when I open it on my ipad, all the positions are off and off screen. Is there a good practice to avoid this or fix this? This is especially true for the navbar and header. (Also I truly appreciate you taking the time to respond and help me!)
Essentially it gives enough margin to adequately fill the necessary area. The most common use is margin: 0 auto (giving no margin to the top/bottom while giving auto margin to the left and right) which centers any div block with a width within a larger container. Basically you’re including enough margin to fill both sides equally (including the width of the div) so it is forced to the middle.
In your case, you were giving margin: auto on both the left and the right to an element that should have been the larger containing div of the tabbed section. That pushed it to the center and didn’t give it’s nested div (the one with your tabs) enough room to stretch out as wide as it needed (the max-width of the tab container).
For the issues with your responsive sizing on your navbar, it looks like your headline text is forcing it to be wider than your window width (as shown by the off-center hero graphic). From what I can tell your sizing looks to be fine but your headlines are using non-breaking spaces that keeps everything on one line - ultimately making it larger than the page. On my iPad (12.9" Pro version) the site looks fine but smaller devices with a lower DPI will render things differently. To fix the problem, either give the headlines normal spaces, or adjust the sizing so they have enough room to show entirely. A trick for keeping things within the same layout but keeping them responsive, you can use vw sizing on your font-size which will scale the size proportionally to your viewport width.
1 Like
Thats so helpful and the VW for font size totally worked! You’re a genius 
If I can bother you slightly again, I thought I had everything figured out but I can’t seem to understand what’s going on.
I added a new container that I want for a background for a new page. I added the image to the div container inside the section, set height to auto, but for some reason nothing shows up. It only shows up if I manually set the height to 100vh Not even 100% works only VH. Is there a reason why it doesnt just fully take the original image and set it?
And when I do set it to 100VH, it fills up the page but then any section with a BG color no longer shows D:
That’s because you haven’t told it what 100% is yet. If the container has no height, than a child with a height of 100% is unset or zero. Setting the Section-Contact (parent) to a value, let’s say 100vh, then the child can take up 100% of that space - or 100vh.
In your recent issue, that’s because your setting the height of the image to 100vh and it’s parent container is set to overflow: visible. That means it will break the zero height of it’s parent container and bleed over the other sections below. To get around that, make sure you’re defining your height (or min-height) within the parent container instead so that it’s child (the div with the background image) fills the size without spilling over.
Just as a note, unless you have a ton of visitors using IE11 or older, I’d recommend using an image block with object-fit: cover instead. It’s got support across all other browsers and you’ll take advantage of Webflow’s responsive images as background images will serve up the same size for all breakpoints.
O that makes perfect sense!
Also I’m dumb, I just wanted a static background image on each page, I could just put it in the body right? No reason to create a new section just for a BG image that I want other content over
It depends on the design and how much is going to be covered up but totally. Most of the time I like to split my sections up, so using a color or background for each section makes more sense and give me a bit more flexibility for smaller breakpoints.
1 Like
Definitely! Thank you again!! Really can’t express how much you’ve helped me. I would still be pulling my hair out trying to figure who knows what
Hi! Sorry to bother again! I’m having an issue with the footer, again it’s working perfect on all pages except for one breakpoint. I was able to make it stick to the bottom on all pages by setting margin top: auto, but on screens bigger than 1440px, it overlaps. Do you know what would cause this?
