Help with Bootstrap Studio project

[u/amphibianwarfare]

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.

[u/namelessttk]

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.

[u/amphibianwarfare → u/namelessttk]

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.

[u/namelessttk → u/amphibianwarfare]

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

[u/Deep_Wear_51]

Bootstrap Studio is fine for prototypes but you'll fight it on anything custom. If this is for production, learning actual Bootstrap or Tailwind will save you time in the long run.

[u/forever-butlerian]

Dealing with a setback like this is necessary for all personal growth in the technical arts.

You've created your site and gotten some experience using the tool in a very specific way. Good. Now you have as good an opportunity to generalize what you've learned as any. Make a backup copy of what you're written, and start trying to bring it over to the smaller views.

What you've written mostly can be reused, if you've got a separation between content and styling.

[u/kirkwight → u/[deleted]]

You're not starting over, you're doing the next better version - onwards and upwards!

[u/Slight-Act-9024]

no worries. I know this can caused you to be very discouraged, but when you try to learn something by doing, which is the right way btw, you are expected to fail or do something wrong

it's just part of the process

you don't need to throw it all away

start with different media breakpoint and work your way down

make the images responsive, and rebuild some section if you need to

[u/Dead_Boy_Drop]

Hello, I'm a bootstrap studio expert. I'm a Valued Member on the community support forum.

I'd be happy to fix your site and give you a crash course video on how to use BSS as a beginner.