In the “Our Services” section I’m using the tab widget, but when trying to add some padding to the first tab, it shows that the other 3 sections are found at the top of the page in a fixed position. I did not put a section wherever it’s showing there is one, and even though all 4 tabs have the same class, the other 3 aren’t inheriting the styles.
Any help out here? Was just about to sign up for webflow but when moving into the tablet portion of the site, things are breaking down.
How’re you doing? I’m going to move this category from “Bug” to “Need Help” as this sounds like a design related issue, as well as rename the post to “Styling Tabs for Different Breakpoints”.
Your site is looking awesome so far, just a few design changes and edits at the different breakpoints and that should clear up the issues mentioned above.
My recommendation would be to click on one of the tabs which is not active (in this case any of the blue ones) and give it styles.
I like to give my tabs percentage based styles, so if I have 4 of them I give them widths of 25%, center the text alignment, change the font size/line height, and remove the padding from the left and right side.
Then once you go to the mobile breakpoint, you can change the width of the tab to 50%, maybe give it a set height and change the font size/line height. And Float: left (this will make the tabs align nicely).
I have gotten this same problem on my iPhone 6s! I think this is a bug. @PixelGeek or @cyberdave any chance you can figure this out? It’s doing it on a bunch of my sites when it didn’t used to.
Hey @TriceWD my apologies for the late reply, I was just taking a look and noticed that you’re using some fixed widths for elements (for example 900px width on the the “banner btn div” class of 900px, which is causing the margin on the right.
If you change the “Width” to 100% and give it a mad width of 900px, this should achieve the result you’re looking for and eliminate the issue of the side scrolling on devices with widths less than 900px. Remember that percentages are your friend, and fixed pixel widths can mess things up quickly especially when set for widths.
That was a perfect solution for the tablet version. Much appreciated!
I’m still having the same issue on the mobile version though, and I’m a little confused as none of my classes have a fixed width on the mobile version.
Any advice?
EDIT:
An image was off to the side. Fixed it. @Waldo thanks for all your advice. You’re a magician.
Hey @TriceWD I’m must confirming that you’re good to go here? That same exact class actually had another style added at the mobile breakpoint to a fixed pixel width if I recall. Please let me know if you have any other questions. I’m here to help!
