uploaded page doesnt look like preview?

ugh. I didnt save as i went along and wasted 2 hours when boostrap studio crashed! lesson learned and a whole lot of other stuff as well! so i revamped the entire index page, and i love it, however when i upload the assets etc the page doesnt look like the preview! what the hell am i doing wrong now! cheers what i have: http://www.victorianvintagespeedway.com/

what i want!

screenshot of preview



also, sorry, when i did the new design the first time, i could delete the word from the link and you just clicked on the pic to get full sized, but now i have to leave the word there?

Not sure what I'm missing here, when I look at the page from your link it looks exactly like what your screenshot is except for the menu at the top which I'm sure you want to be there ... and the Facebook link at the bottom which I also assume you want to be there. Can you give us a screenshot of what it is you're seeing in your browser? Might be you need to clear your browser cache as well.

I will admit though there are quite a few times that things in the preview do not match the browser preview, but most always the browser preview matches what is uploaded so sometimes you need to adjust according to what the browser preview shows rather than the in app preview.

Other than that it looks good and right to me.

Your live site looks just like your screenshot on my browser. As far as the images not being links, you have to add your link and then place the image INSIDE the link, then delete the "link" text, and that will leave you with a clickable image. Or, you could make life easy for yourself and just use the Lightbox gallery component which you'll find under the Media heading. There are also tons of free gallery scripts out there (this is one of my favorites https://nanogallery2.nanostudio.org/ )

Also, Bootstrap Studio does auto-backups of your work. If you go to the top menu and click file>backups, you'll see the window where you can set all your options (backup frequency, location, etc.) This feature has saved my butt a couple of times when my computer crashed due to other software locking up the machine.

Hi guys, thankyou so much for the replies! well i got a wierd and wonderful surprise, i read your comments and put the site up and yeah, its all there! last night the superman theme had not taken effect, ie the blue banner was still white, and the area around the pics was white! so not sure why, but im very happy with that!

I thought i had the auto save on, and i dont know how many times i told my kids in the past to save save save!!! i was watching the tutorials while i changed things, and i guess i got lost in it! so i will set that up stat!

and yes now i remember, i forgot to put the photos in the link!!! it was midnight, i was toasted but determined to get it done! thanks so much, really appreciate it, and i will look for the light box, because this was a bugger to get right, but thn at least i have a bit of understanding for it now! thankyou so much, cheers

You're much better off using a lightbox or some sort of on page gallery rather than having larger images open in new windows. That's a poor user experience, and harkens back to the days of Internet Explorer and pop-ups. Nobody should ever have to leave your site to use your site.

ah, ok, the tutorial told me to do it like that! i agree its a pain! ill look at the other options, ill try the gallery, i have opened your link, not sure if im clever enough yet to use it, but ill give it a try, thankyou,

oh wow, i just copied the page and put in the light box, yes that is soooo much better! and quicker and easier!!!! gunna hit the gym and then change to that, thankyou so very much for all your advice and assistance, cheers

You're very welcome!

Another really nice feature of Bootstrap and BSS is the Modals, those work great when you want to showcase more information about something without having to create a new page for it. :)

Hi Jo, ok, learning something new! would this be good for doing Galleries with more than 1 event maybe? im going to try anyhow! thankyou, the site is really looking good now, and funnily enough, stuffing up and having to start over made a few things click! cheers, jo, the other one!!!

so i wasnt sure what that was, meanwhile i found Collapse and hey it worked! pretty cool! thankyou! http://victorianvintagespeedway.com/galleries.html

I would stick with a lightbox for image galleries where you have a lot of them because there are many out there already created and some within BSS's Online Components as well that you can adapt pretty quickly. Models on the other hand need a little bit of work to connect the button/link to the model window and it's usually a one at a time thing, used more for things like giving more information about a product, showcasing something special on a page and such. Lightbox galleries are used more for displaying multiple items. Although Lightboxes can be used for single ones images or displays, it's not the best choice for single item displays.


I noted that in your second gallery, that when you scroll through using the arrow navigation, when you get to images 39, 40 and 41 they are stock images from BSS, do not have corresponding thumbnails of cars in your gallery. I think you might have forgotten to delete something in your gallery components.

Also, why are you separating the rows of images with paragraphs that have a single period character in them? Seems kind of odd/not clean.

Hi, yeah i tried to get rid of the stock pics, but i actually could not find them in the body! it was late, so i am going to have another go today.

and the answer to the second question is i want a space and i dont know how to get one! ithough div meant a space but nope! can you please tell me what i should use? im guessing its a really simple thing but its eluded me so far! thanks for the reply, i really do appreciate your help!

i really am pretty green, it took me 2 hours to work out the collapse thing, to get the pics inside it, and i was oh so proud of myself!!!

what i would like to know to is how to get the pics to go smaller so it looks better on an ipad? i just realised this morning on my ipad, 4 in a roe goes down to three, and the odd ones go in a line by themselves!

once again, thankyou to you both, i really appreciate it! cheers

At the risk of repeating myself these days lol, you really should find some tutorials on HTML/HTML5 and CSS/CSS3 and then after that go through the Bootstrap website and see how things are done there. Although the BSS app is fairly drag and droppable, it's definitely not "only" drag and droppable. You do need a fair amount of knowledge of how the code works to make sure you get things how you want it.

My philosophy is ... why use hours to figure out 1 thing, when you can use those same hours in tutorials, and then understand why it took you so long to figure out that one thing. :P

Anyways it's a good idea and I'd encourage it immensely if you really want to get things working nicely.

wow, well ok, thanks for that! ive tried following the tutorials on the boostrap page, however he speaks very quickly, i am 33%deaf, so i have to keep going over it, so i muddle along. this website is a volunteer thing for my hubbys carclub, i actually wrote a website in html 15 years ago for a business i had, and it worked just fine! but things have changed. so i was looking for an easier option, the reviews for bootstrap studio were good, and it said it was drag and drop and easy. (I tried something else first that was impossible). i guess it is easy - if you build websites for a living. im a mechanic by trade. if you ask me how to change a tyre (you know the basics that everyone should know, ala making a space!) i would just tell you, i would not suggest you go to trade school. I could also tell you in detail how to take an incredible long exposure photo or a perfect portrait pic, which is still, just my hobby, without making you feel stupid. i dont take it personally, i see you give a lot of people here the same advice! cheers, ill keep muddling along!

I just took a quick look and I see empty divs in the gallery (no thumbnail) with links to full sized images, so that's one problem.

You can space any component in Bootstrap using utility spacing classes, for example pb-3 which is the same as adding the CSS .pb-3 { padding-bottom: 3rem !important; } or mt-lg-5 which would add @media (min-width: 768px) { .mb-md-5 { margin-bottom: 3rem!important; } }

The way you set the sizing of the images on various devices is by setting the column widths at each breakpoint. Bootstrap uses a 12 column grid, so the column widths always add up to 12. For example, if you have a row with 6 column each containing one image at your largest screen size, that would mean each column has a width of 2 at the XL breakpoint. They might also be 2 at the LG breakpoint, and then drop down to 3 at the MD breakpoint (so you'd have 4 images because 3x4=12) . If you want two images side by side on mobile which is the default (smallest size) you'd have your columns set to 6 (6x2=12). The columns will flow down, so you'd end up with 2 images, then 2 more images, and then 2 more images all stacked. To space between them you'd add spacing classes.

Remember, you should start with your smallest (mobile) layout first, and then go up from them.

You need to study up on Bootstrap and learn what all the various classes do. The whole point of using a CSS framework is to save time and maintain consistency throughout your website.

The official Bootstrap page is a good place to start https://getbootstrap.com/docs/3.4/css/

And this site can be very helpful until you commit the various classes you use regularly to memory... https://hackerthemes.com/bootstrap-cheatsheet/

You're going to run into many, many more obstacles as you learn, and honestly I don't have the time to explain how to do everything each time you get stuck. You've got to read up. Put in the leg work. A couple of hours spent studying, watching the video tutorials and following along by building the sites along with the video will go a long way to saving you dozens of hours down the road.

So go get to work!!! LOL! And have fun.

jo, i asked for help, you dont want to help, fine just dont reply. its that easy.