I cannot change the font-size anymore for mobile devices

[edinav24550678]

Guys, I have a big problem,

I'm designing a website in Dreamweaver, and for some unkown reason I cannot change the font size of my h1-head anymore. This is really necessary of course, for I cannot have a the same size for desktop as for a mobile phone. Maybe it has something to do with using a grid-layout?

I've unistalled en re-installed Dreamweaver, but that did not solve the problem.

Can someone take a look at my stylesheet and html-source file and maybe find a solution? Thanks!

[BenPleysier]

Instead of using media queries (which in your case are wrong) try this for the global style:

h1 {
    font-size: 5.9vw;
}

Adjust the value to suit.

A better method is to use Bootstrap 5 which does this automatically.

Ik gebruik Wappler gevestigd in Enschede.

[edinav24550678]

Hallo BenPeysier,

Dank voor je antwoord,  kunnen we verder in het Nederlands communiceren?

Ik neem aan dat ik de fontsize in mijn stylesheet moet zetten onder 'General'? Of direct op mijn html-code pagina? Zoals je kunt zien gebruik ik al Bootstrap. Hoe gebruik ik dat voor de font-size?

Graag hoor ik ook van je waarom in mijn geval het gebruik van media-queries fout is, en wat ik dan moet doen om te zorgen dat  de site er goed uitziet op mobiele apparatuur.

Hartelijk dank alvast.

vriendelijke groet,

Edina

[edinav24550678]

follow-up:

Ik heb je advies gevolgd, en nu ziet het er inderdaad beter uit. Alleen wordt de tekst op smartphone apparatuur wat klein. Kan ik nog wat spelen met de vw?

[BenPleysier]

Have a look here:

https://www.intracto.com/en-be/blog/rfs-automated-approach-responsive-font-sizes#:~:text=RFS%20split....

[edinav24550678]

Looks good, but I do not understand yet how I should download it.

[edinav24550678]

Hallo Ben,

Kan je nog toelichten waarom ik geen gevruik zou moeten maken van media queries in mijn geval?

Groet,

Edina

[BenPleysier]

Darr is niets op tegen als de juiste regels gevolgd worden.

Zie hier: https://getbootstrap.com/docs/4.1/content/typography/#responsive-typography

[edinav24550678]

Hallo Ben,

Hoe moeten de codes waarvoor je die link gaf worden ondergebracht in de media-queries die ik in mijn css-stylesheet heb staan? Heb je een tip hoe je op efficiënte wijze media-queries gebruikt zonder dat je voor elk mobiel apparaat afzonderlijk hoogte en breedte moet invoeren, n.l. minder tijdrovend?

Dank alvast,

Edina

[BenPleysier]

Als voorbeeld, wat betekend dit?

@media screen and (width:1180px) and (height:820px){
    .container-fluid, .article, .aside{
        height: 520px;
    }
h1 {
	font-size: 40px;
}

Als het venster van the browser 1180px breed and 820px hoog is, dat moet het lettertype 40px groot zijn. M.a.w., als het venster 1181px breed is dan geldt een andere regel.

Bootstrap 5 heeft deze breekpunten

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

As you can see, the media queries start with mobiles and work their way up the scale. The smallest devices do not have a media query, meaning that you must start the design with the mobile in mind. Then as the browser  window grows, media queries with a minimum width override the previous style rules. Notice that height does not come into it. This is because a user is used to scrolling down but not scoll sideways.

I could write a book on responsive design, suffice to say, if you have more (or different) media queries than Bootstrap 5, you need to think twice.

My advice is to ditch your current style rules and start working within global styles for mobiles and adding the 4 media queries for larger sizes. Don't overthink it.

(Sorry, engels gaat mij beter af sinds ik bijna 50 jaar woonacthig ben in Australië)

PS: Stay away (if possible) from setting heights. These are not conducive to responsive design.

[edinav24550678]

Hello Ben,

Thank you for this advise! I'm going to erase all the media-queries in my stylesheet and start over again with your breakpoints. Actually, I'm also working on another design with a 'cleaner' stylesheet I can try out these principles on. Envetually, I will get the hang of it. 

Regards,

Edina

[osgood_]

Hello Ben,

Thank you for this advise! I'm going to erase all the media-queries in my stylesheet and start over again with your breakpoints. Actually, I'm also working on another design with a 'cleaner' stylesheet I can try out these principles on. Envetually, I will get the hang of it. 

Regards,

Edina

By @edinav24550678

I agree with Ben, you don't need more than 3 or 4 media queries....however I dont agree with using VW width to set responsive text as its not that controllable from large to small screens. I mean it will do the job but if you want to be a bit more precise you should manually set the font size based on what you consider is correct and not leave it to some automated workflow.

[edinav24550678]

It still seems that four media queries aren't enough. There are mobile devices as tiny as 280px width (galaxy fold) or up to 414 px and bootstrap doesn't seem to adapt to that. But maybe it's my division-layout that's the problem?

[Nancy OShea]

Devices can be identified by min and max-width values.  These are the breakpoints used by Bootstrap 5:

xs:  0  - 576px (default mobile-first)

sm: 576px  - 768px

md: 768px  - 992px

lg: 992px  - 1200px

xl: 1200px  - 1400px

xxl: 1400px or higher...

[osgood_]

My advice would be not to get too hung up trying to serve the perfect result to every variable width device which is available. You need to choose a range of media query widths and then hope that devices which fit between those widths are still 'usable' for the viewer. 

[Nancy OShea]

In other works keep layouts simple. 

Use 1 column layout on small devices.

Use multiple columns on larger devices.

You'll have fewer problems that way.

[edinav24550678]

Hello Nancy,

I've put in one more media querie just now,  and now it looks fine in all devices tested in the Chrome developer tool.

Now to the next step!

[Nancy OShea]

Try this working example.

Hope that helps.

[edinav24550678]

Thanks.