How to make site scale with resaloution?

[GreezyJeezy]

So when I put together a separate site I'm working on I noticed when I went on it on my iPad it's all weird and that's because when I was positing it it was for my resaloution. 

 

Is is there a way to make my text and embedded stuff scale to resaloution so people with any monitor size can view it how it should be?

[xBlizzDevious]

1 minute ago, GreezyJeezy said:

So when I put together a separate site I'm working on I noticed when I went on it on my iPad it's all weird and that's because when I was positing it it was for my resaloution. 

 

Is is there a way to make my text and embedded stuff scale to resaloution so people with any monitor size can view it how it should be?

Don't quote me on how, but I'm pretty sure that either with HTML <div> tags, you can use an attribute in there to size it as a percentage. If it's not in the HTML tags, it'll be as CSS. Someone more knowledgeable will be able to give you an accurate answer.

[Masa]

I can recommend w3schools responsive  tutorial.  It is very easy, I can promise!

http://www.w3schools.com/html/html_responsive.asp

[Cryosec]

In my websites, I use CSS (editing Bootstrap's themes):

 

@media screen and (min-width: 400px) {
  .someclass {
    foo: bar;
  }
}

fix the min-width and max-width with px size of screen to use specific classes

[Charcoal_]

Use SquareSpace. You should...

[GreezyJeezy]

1 minute ago, Charcoal_ said:

Use SquareSpace. You should...

No thanks, I want to learn HTML and CSS then eventually PHP. I don't want to use templates and stuff like that.

[Marmaran_1]

You should use some relative font sizes like: 120% or 1.9em

The code for doing that is:

.something {
  font-size:170%;
}

I think it's only working in CSS, not in HTML...

6 minutes ago, Cryosec said:

min-width and max-width

Use this for allowing the website to rearrange the objects to fit the screen resolution.

4 minutes ago, Charcoal_ said:

Use SquareSpace. You should...

I like to make my websites manually by coding them. It's harder, yes, but you learn at least something.

[edwardu12]

I use Weebly and with all their designs are adaptable to screen resolutions. BTW, this website is free to create and publish websites.

[edwardu12]

I use Weebly and with all their designs are adaptable to screen resolutions. BTW, this website is free to create and publish websites.

[GreezyJeezy]

2 minutes ago, edwardu12 said:

I use Weebly and with all their designs are adaptable to screen resolutions. BTW, this website is free to create and publish websites.

I already have a host and domain and all that. So I have no need. I rather just learn how to. I'm not lazy

[GreezyJeezy]

1 hour ago, Cryosec said:

In my websites, I use CSS (editing Bootstrap's themes):

 

@media screen and (min-width: 400px) {
  .someclass {
    foo: bar;
  }
}

fix the min-width and max-width with px size of screen to use specific classes

what is @media? and what does min width do? 

[scottyseng]

2 minutes ago, GreezyJeezy said:

what is @media? and what does min width do? 

It's a CSS media operator. You can make CSS code either only activate or apply to certain media that meet the conditions you set.

 

The min-width means that the width of the active browser window must be at least 400px wide before this code activates.

 

You can have multiple CSS media operators (For example, I usually make a CSS media operator for each major screen res size for adaptive design)

[Cryosec]

1 minute ago, GreezyJeezy said:

what is @media? and what does min width do? 

@media is a query which arranges objects based on screen size (used in Bootstrap templates, I actually never tested id without bootstrap).

min/max-width is for defining screen size. for example "min-width: 400px" means that the CSS class will be applied to screen sizes bigger than 400px. max-width works the opposite way, as it defines the max width of a screen for the specific CSS class

[GreezyJeezy]

7 minutes ago, scottyseng said:

It's a CSS media operator. You can make CSS code either only activate or apply to certain media that meet the conditions you set.

 

The min-width means that the width of the active browser window must be at least 400px wide before this code activates.

 

You can have multiple CSS media operators (For example, I usually make a CSS media operator for each major screen res size for adaptive design)

 

6 minutes ago, Cryosec said:

@media is a query which arranges objects based on screen size (used in Bootstrap templates, I actually never tested id without bootstrap).

min/max-width is for defining screen size. for example "min-width: 400px" means that the CSS class will be applied to screen sizes bigger than 400px. max-width works the opposite way, as it defines the max width of a screen for the specific CSS class

so is min 400 what i would want to set it as? and what does the foo: bar do?

[scottyseng]

1 minute ago, GreezyJeezy said:

 

so is min 400 what i would want to set it as?

It depends on what resolution you want to target. You kind of have to find what works best for you. For example, say if you wanted to target 2560 x 1440, the width would be 2560 (I would do 2500 though). If you wanted to step down to 1080p, then 1920 wide (or about 1900). You have to be a little under because scroll bars count in the active window area. It might not trigger correctly with scroll bars.

 

There's also min height, but that's not used much since most people have vertical scrolling websites.

[GreezyJeezy]

1 hour ago, scottyseng said:

It depends on what resolution you want to target. You kind of have to find what works best for you. For example, say if you wanted to target 2560 x 1440, the width would be 2560 (I would do 2500 though). If you wanted to step down to 1080p, then 1920 wide (or about 1900). You have to be a little under because scroll bars count in the active window area. It might not trigger correctly with scroll bars.

 

There's also min height, but that's not used much since most people have vertical scrolling websites.

what's the foo: bar part do?

[scottyseng]

1 hour ago, GreezyJeezy said:

what's the foo: bar part do?

That whole .class bit is where your CSS code goes. You just code in your CSS normally when it's inside of a CSS Media Query.

[Cryosec]

12 hours ago, GreezyJeezy said:

and what does the foo: bar do?

"foo: bar" is just a placeholder. There you should enter your css code as in any css class.

 

"foobar" is just a placeholder word commonly used in programming. It doesn't mean anything

[Gachr]

This is the manual way, which is quite complicated. You can just use a framework like Bootstrap or Foundation to have all the "scaling" stuff done for you.

And try to find someone to question on PM, you created like 10 different topics last few days, most with quick questions.