New to BSS and loving it!
I am re-designing my homepage for my online business.
I am having an issue with columns not stacking or going under one another in mobile version.
I have checked these forums and I see the common response of setting col-6 (takes half screen) col-12 (takes full screen)
And to adjust these settings in "column options" for the relevant screensize.
I have tried and tried and tried. I am going crazy haha.
For the first section, I used the component "header blue" - I deleted the menu and deleted all the "iphone" images until it was a blank column and added an "image"
For the second section, I just added 1 row 2 columns component.
Screenshots to help illustrate my issues.
I am a novice in regards to coding - but have some understanding.
I will be using the 2 columns layout in the future and would love to know how to fix this!!
It's driving me mental
width - Auto / 12
https://photos.app.goo.gl/u3wCcW81no9jageU6
So this kind of works, but now the "container" isn't stretching down enough (blue background)
The blue background may be a background image that is set contain (as opposed to cover) which is why it's shrinking and not covering the vertical area. You have to set sizes on ALL the columns at a given break point. If you want the first column to take of the full width on mobile, than it should be 12, and the second column should also be 12. The image is probably extending outside the column because you don't have "responsive" checked, so it's not shrinking to fit inside the column.
If you post your actual site, or a link to your .bsdesign file, it will be easier for people to tell you what you're doing wrong.
@jung-tech, get to know the actual framework and you will have a better understanding of what things mean when using the BSS app.
https://getbootstrap.com/docs/4.4/layout/grid/#how-it-works
Padding and margins can play mean tricks on you. Things like the extra white at the bottom with the picture blowing out the side and bottom are probably related to the padding in that column. Forcing the image to go outside the column in which things no longer care about sizing of containers.
Like Printninja said, you need to make sure that you are adding column size classes to each column if you are defining them which brings me back get to know the framework and you'll understand that more.
@printninja
The background is a just a colour setting, after reading this, I tried different "size" and "repeat" setting in hope that it would fill when the column moves in mobile version.
Unfortunately my attempts were unsuccessful.
I have taken your advice and tried the 12 (S & M) 6 (LRG & XL)
It moves the columns as expected, however, i think the issues i the background "container" not extending now that the picture column has moved below?
Please find a link to the project here:
https://drive.google.com/drive/folders/1GP3JGdJFFI416A89db839-zZ73bjgT91?usp=sharing
@saj
Thanks for the link, I actually saw that information on other posts and read it before posting.
I thought I understood it, but clearly not haha.
I have read it again, and as mentioned to Printninja, the column sizing seems to be working ok now (I think) but not the background "colours".
I also had margins set on the images to help centre them (they were sticking to the top of the column) - I removed the margins in hope it would fix it....
NO LUCK! arggghh. All im doing is trying different setting combos in hope I will find the correct ones.
I am trying my best to understand the framework.
But I am really stuck on this one.
I would just like to say thanks for taking the time to reply.
Sorry for the late month response - I had massive issues with my amazon store during the pandemic that took priority over this website design.
If either of you could do me a massive favour and please tell me what the hell im doing wrong?
I would love to avoid this issue in future designs.
At the moment I cannot look at your file because I am still on the 4.x version of BBS (long story) and 4.x won't open projects saved from 5.x. I won't be updating my BSS program for at least a month because I'm in the process of training someone who also has 4.x on his system, and I don't want him to try and upgrade the program on his own, and I can't get to his location right now due to the COVID-19 lockdown.
So hopefully someone else here can take a look for you.
@jung-tech, You have a lot of inline CSS. I'm sure that's causing some confusion. Part of your problem is that you are defining height's to elements causing things to blow out the bottom. You have margins that are doing a similar things as well. Remove the inline CSS. Try using Flexbox methods in your image areas to align them how you want.
@printninja thanks for the response, i appreciate the effort anyways.
@saj
I have no idea how the inline CSS got in there.
I think im going to remove the an entire element and start again and check for the inline CSS.
Can you please tell me what I should be defining heights to?
The picture itself?
In previous comments, margins have been mentioned to play tricks like this.
What is your method / recommendation to aligning / moving the picture so it sits centre? (without using margins)
inline CSS is caused by the user not defining where they want the styles to go in the Options pane. You will want to define the CSS file each session so that the app knows which file to add them to and which styles to create and so on.
Typically sizes do not need to be set if you create the images to the size you need. If you set the images to be responsive (toggle in options pane) they will resize themselves as needed. Sometimes you need to declare a size for backgrounds, but not typically placed images.