Hello, So i preapere my layout for a bigscreen, after checking this on mobile phone... Some the text is not in the right place... I'm not sure how i can adjust this properly, but one of i think is to change the size of the font for mobile phone.
How to make 2 separate setting? for mobile and for big screen in one project... using bootstrap studio ?
Hi Kamil
If you want a different font size on mobile va desktop then you will need to specify a media query for the breakpoint you want the different fonts applied too.
To do this
1) select the mobile viewport option in the preview window tool bar
2) open your CSS panel and select the font heading or paragraph text change. This should be highlighted in the css panel.
3) in the CSS panel, right click on the class name that is powering your font size for selected and click “create media query”.
4) once you have specified the font size for the mobile view port, simply toggle between desktop and mobile viewports and it should change.
If you are not familiar with media queries then I suggest brushing up your knowledge before doing this.
Another thing to keep in mind is also that websites using Bootstrap (and many other frameworks) are built Mobile First. This means you should start with the phone sized design and work your way up instead of the other way around. This is because the small size is considered the "default" size now.
Well thank You both. That is true to start design first on mobile... propably second website i will create on this way... but firstly i need to fix the first one... which is actually not so bad... :) and i enjoy bootstrap studio tool alot of.
I will try what you sugest, and give you feedback...
Guys i check it now is better, i'm not sure should i create another topic or continue this with other question. Let's try continue this if you think that i should create another just let's me know...
<hr />
So new question is.: Guys i need your help, it's my first web, knowledge level 1 But on the other hands i'm so happy with result, but always could be better.,
What is done.: 1) Project in bootstrap studio 2) Transfer domain to cloudflare 3) Publish it
You can check the result for now, http://thestars.pl/ (it's my cover band where i played).
Question, what i'm doing wrong ?
a) export.: There is no pass now, should i export with pass? When i export with a pass, i have a pop up asking pass, when i type i have a access. But i would like to be secure, witout asking pass. So what should i do, put this password somwhere else ?
b) Effect on text fade in / fade out dose not work on mobile. That is normal ?
c) The Menu (Referencje) - looks diffrent (on the same computer/ using the same browser) by export localy( http://192.168.56.1:8000/ -- looks like i design vs http://thestars.pl/ (looks diffrent)
d) The same Menu (Referencje) - looks complitly destroy on mobile. 1 - Footer is not on the end 2 - column dose not have a white colour (in block Testimonilas --> i set white colour on DIV) 3 - The size of image is diffrent
Structure.: HTML<br /> Body Navbar (link) with others Main Block Testimonials Container Row<br /> Column (3x) Div Paragraph Div Image Heading Paragraph Container Div Row Column(with a logo 7x) Block Footer Basic
Any idea ?
Guys I found some interesting things.: It's look like css is not properly exported, or maybe is not exported why? how i check, i disable one of my css, and now preview local and domain looks the same = bad. When i enable, local preview --> looks like should be, export looks bad.
1) There is a limit how many css i can attached to html? 2) Or other things?
OK, i just cleanUP manually some css, and now it's working... Still don't know what was the issue, becouse only what i do was try to find manualy unused css (disable, check, delete) i was having around 20-30 css. Anyway after cleanUP, now it's work.
Well Few hours, and it's fixed. Almost all my issue, i'm not sure if the fix is properly, but if it's work is "fine". What i dont know.:
1) How to properly put the web in secure mode. (no i have message that my www is not secure... ) 2)What about fade in fade out on (on phone, mobile) - should work or not ?
It's crazy, i put question and find answer... So to set https, you have too set this in my situation on cloudlfare... two checkbox and its done.
So the last question why my jquery, i mean fade in fade out effect are not showing properly on mobile (iphone and samusung)... This two i have got. Any idea?