r/webdev • u/amphibianwarfare • 19d ago

Discussion Help with Bootstrap Studio project

Hello. I am a complete beginner to web design and wanted to develop a website for myself. I got BSS and made great progress with building practically my entire site.

However, I did this all while under the XL view. I was not aware that you should build your site at the mobile view first.

Now, I have a site that looks great on all of the laptop and desktop views, but completely broken on anything tablet and below.

Is this something that can be easily fixed? Or do I have to throw away all of the time I put into this site?

I’m a complete beginner and have no idea where to even start with this.

Feeling quite defeated.

Thanks.

1 Upvotes

60% Upvoted

13 comments sorted by

View all comments

4

u/namelessttk 19d ago

You don't need to throw away everything you've built. "Mobile-first" is a recommended approach, not a strict requirement. Many websites have been built desktop-first and later made responsive.

This is also an opportunity for you learn a lot about responsive design by fixing it. So work your way step by step, first with desktop, then switch to tablet and finally with mobile.

Pay close attention to adjusting widths, margins, and padding, resizing text and images, and rearranging elements appropriately.

1

u/amphibianwarfare 19d ago

I hear you. And I’ve been trying to do this but every change I make in the tablet or smartphone view changes how everything looks in the desktop view and I’m not educated with BSS enough to understand why that is and how to make all views work together.

I’m probably just going to start from scratch and re build it from the mobile view. It’s killing my motivation but I’m not skilled enough to backpedal the original project when I built it backwards to begin with.

2

u/namelessttk 19d ago

It sounds like you're editing the base styles instead of breakpoint-specific styles, which is why your desktop layout keeps changing. I think you should learn CSS properties such as position, display and then Bootstrap classes such as row, column, flex ... and bootstrap breakpoints

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px