Streaming live at 10am (PST)

Styling Tabs for Different Breakpoints


#1

I'm having trouble with a bug in the editor... I think.

My site can be found at mockup123.webflow.io

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.


#2

I'm also confused as to why my website is pushed off to the left side on an iPad Air view.

Is this supposed to happen?


#3

Hello @TriceWD

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. :smiley:

There's also a Great tutorial on Styling Tabs available here.

Can you please post a Read-Only link for us to further assist you with any of these issues? :smile:

Thanks in advance! :smile:

Waldo


#4

Hi @Waldo,

Thanks for the quick reply, much appreciated!

Here is the Read-Only link: https://preview.webflow.com/preview/mockup123?preview=1a9f3910e3454967b342e2c0919122ae

Thanks for the tutorial as well.

Any insight as to why things are happening and what I can do to correct the issues?


#5

Hey @TriceWD

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). :smile:

Please let me know if you have any questions.

Thank you!

Waldo :smile:


#6

Hey @Waldo

Thanks for all the help here, I really do appreciate it.

I'll apply your solution for the tabs, but I'm still confused as to why my project is pushed to the left on a tablet (iPad Air 2).

Have you seen something like this before?


#7

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.


#8

Anyone know why this is happening?


#9

@DFink Yup, this happens for the mobile version as well for me.

@Waldo
@cyberdave
@PixelGeek

Anyone know if something is buggy or if I'm doing something wrong in my design process?

Any help would be much appreciated. I've PM'd a few people, but haven't heard back from anyone.


#10

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. :smile: Remember that percentages are your friend, and fixed pixel widths can mess things up quickly especially when set for widths. :smile:

Please let me know if you have any other questions :smile:

Thank you,

Waldo


#11

Hi @Waldo

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.


#12

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. :smile: I'm here to help!

Thank you,

Waldo


#13

I'm good to go.

Thanks for all the help @Waldo it's much appreciated!


#14

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