Narrow text on a small screen.. media query?

HTML & CSS
1

Hello,

please see

https://forallthetime.com/project9/index.html

desktop is how i want it

small screen the text is VERY narrow…

  1. why is that

  2. how do i fix it?

i want to add width to the text

please help me out :slight_smile:

thanks!

2

You have used a magic number fixed width margin of 10rem on your .text element which means that on any screens that are less than 20 rem wide there will be no room for the text. Use a fluid measurement such as vw so that the space gets smaller or larger depending on the screen size.

e.g.

.text{margin:10rem 10vw}

Adjust to suit.

Also your button elements are too wide as you made them 100% plus 16px padding total making them 16px too wide for any container anywhere. Use the border-box model to keep the width to 100% only or set the button to display:block and not have any width needed at all.

3

.text{margin:10rem 10vw}

bingo!

ok, i adjusted my .button to display:block and removed the width

doesnt look right

the black
contacts shifed to the left, not fully accross the bottom

16px

is that right? i saw 8px, am i doubling somewhere?

kindly explain

maybe share this code?

please see updated code

https://forallthetime.com/project10/index.html

i am trying here :slight_smile:

know i am thankful!!!

4

Oh yes I forgot buttons have some UA inline-size property applied that over-rides the display:block.

I would do this instead.

button {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  outline: 0;
  display: block;
  width: 100%;
  padding: 8px;
  color: white;
  background: #000;
  text-align: center;
  cursor: pointer;
  font-size: 18px;
  box-sizing: border-box;
}

.

8px either side = 16px :slight_smile:

1 Like
5

SUCCESS!!

thank you!

its perfect on my desktop with dev tools, but on my iphone the black “contact” is small and shifted to the left…

i am looking for css / html projects to practice with… hone my skills, pratcice, tweak, experiment and portfolio

yes, i have done a google search

can you reccomend a good (great?) resource for css / html projects with source code?

i would appreciate it!

:slight_smile:

6

This is what it looks like on my iPhone SE.

IMG_2070
IMG_2070750×1334 177 KB

7

ok, i may have goofed :frowning:

not on purpose now

forallthetime.com/project10/index.html

THIS is where i saw the error

forallthetime.com/project11/index.html

THIS is working

a question for you… say i have a similar problem with project10 on the first www.forallthetime.com…

is that called a root folder?

some time back, someone sugestd i add <link rel="stylesheet" href="style.css!1234">

to help get the code read again… prompted,
updated?

when i run into problems,like project 10 above. i simply make a new directory in file zilla… crisis averted! it works fine!

anything you can do would is a help!

8

Both those links seem ok on my iPhone now.

If you rename your style sheet when you update it then it won’t show the cached version in error.

Of course you could always just clear your cache locally with a hard refresh or use with devtools open and set to no cache in the devtools settings.

Usually when developing you want to do one or the other so that you are sure to see the latest code.

9

help me please, how do i clear my cache locally with a hard refresh?

or this?

Paul, sorry. idont know how to do that :frowning:

walk me through slowly, step by step?

not trying to bug you here…

<link rel="stylesheet" href="style.css/!1234">

does that look good?

will it solve my issue to see the latest code?

do you follow?

thank you!

10

Open the developer tools in chrome then hover your mouse over the refresh button and a context menu should appear with the option of hard reset.

Some browsers used to do this if you clicked a few times quickly in succession.

It’s explained half way down this page.

No do this:

style.css?v=1 and then just update the “?v=1” to “?v=2”, “?v=3” etc.

11

wonderful!

no immediate concerns, so i will save your advice here and reference it when the time comes :slight_smile:

thanks!!!

tell me…

any advice for online resources for learng CSS and HTML with source code?

i found 2

i hope you can help me with some good ones!!

thanks!

12

Sitepoint has some good structured courses but you will have to pay for them. The css tricks site also has lots of useful articles. You can also search codepen and often find many examples of what you are attempting.

As far as I am concerned the best way to learn is to immerse yourself in the topic. If you have the basics understood to a reasonable level then you should practice grid and flex. I’m not talking about a few minutes here and there but hours of testing and practicing and doing to understand what is happening.

Until you can think in a css way you will be stuck copying and pasting code you don’t understand. Copy and paste actually slows your learning down so try and write it yourself first.

Learn the basics first and then dive deep into topics like flex and grid. A tutorial is never going to teach you everything you need to know unless you understand the concepts presented.

It really is a matter of practice, practice and more practice.

1 Like
13

i agree :slight_smile:

interesting here, for https://forallthetime.com/project11/index.html i started with 1 card. thats it. and it was looking different oubviously

i added more content than what i started with, more cards and text, 2 columns of text at the bottom and a repeating background

i used flex-box for the cards and css grid for the columns of text… this seems to be what you suggest i do… well i have already been doing it!

yes, please

i have been a juggler for many yeas… and all about practice and perseverance

thanks for your advice!!

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.