Hi all, I am using the Bootstrap 4 framework on an HTML file to build my website. The website looks great on my Mac, but looks bad on mobile phones, tablets, etc. When I tweak the design specifically for phone by switching to the phone view on wappler, it seems to change the entire CSS code.
How do I customize responsivity for phone and tablets separately? Thanks!
Bootstrap is mobile first, meaning that you need to design for a mobile environment first. Then move up to a larger screen design for that and so forth.
If give us a link to the remote site, we can have a look at what you have done.
I should be releasing a tutorial on this in a week or two
Thanks! So I should click on the mobile view first and make sure everything look good on there, and then switch to tablet —> laptop —> desktop. I guess I will have to do a redesign, but wouldn’t take too long. The site is lemontreemedia.io
Just a follow up question: I see that I can style an element with the properties panel, but I can also style an element using the style section, adding things on my custom css file. Which one should I be using? I am currently using both, tweaking properties first, and if that doesn’t achieve the purpose, I go to the design panel or directly customize the styling.
That is correct
No. If you first make sure that the layout is correct for mobile view, then change to the next view, you will nost likely find that there are half a dozen or so adjustments to make.
As an example, I want one column for mobile-portrait, 2 columns for mobile-landscape and tablet and 3 columns for larger, the code would look like:
<div class="col-12 col-sm-6 col-lg-4>
In your code, I found (only as an example)
<div class="col-xl-12 mb-xl-4 col-12">
If done properly, this would read
<div class="col-12 mb-4">
Which means that for all views, 1 column with a bottom margin of 4 (1em)
I hope this helps. For more, see:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Actually i am working on that very thing (among others) right now, a complete introduction to Wappler course, Just having to change lots of the video to feature the new database manager which impacts on so much of it.
Thanks in advance…