• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I cannot change the font-size anymore for mobile devices

Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

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!

Views

285

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

Have a look here:

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

Hallo Ben,

 

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

 

Groet,

Edina

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

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

 

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 26, 2022 Oct 26, 2022

Copy link to clipboard

Copied

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.

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 27, 2022 Oct 27, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 28, 2022 Oct 28, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 29, 2022 Oct 29, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 29, 2022 Oct 29, 2022

Copy link to clipboard

Copied

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...

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 30, 2022 Oct 30, 2022

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

Try this working example.

 

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 25, 2022 Oct 25, 2022

Copy link to clipboard

Copied

Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines