CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
raimond
raimond

Reputation: 89

How to change width of an element without using media queries?

I have a page with a bunch of paragraphs, which look too stretched out on large screens. So I set width: 600px to p. Which made it look nice.

Only problem is that on small screens the paragraphs are still at 600px.

Any way to go around this without messing around with media queries?

In short I want .p to have width:600px; on large screens and no width setting on smaller than 600px.

Upvotes: 0

Views: 336

Answers (3)

Rohit
Rohit

Reputation: 1802

You can usemax-width like snippet below:

div {
    width:100%;
    max-width:400px;
  }
<div>I have a page with a bunch of paragraphs, which look too stretched out on large screens. So I set width: 600px to p. Which made it look nice.</div>

Upvotes: 0

Dave Cripps
Dave Cripps

Reputation: 929

It's no more effort to set up media queries than it is to use jQuery as @Sandip Subedi describes above. It's a matter of preference.

In your CSS you simply need:

p { width: 600px; }
@media (max-width < 600px) {
  p { width: 100%; }
}

That will set your p to a fixed 600px when the screen is greater than 600px wide, then the media query lets the p be 100% wide on anything smaller.

Upvotes: 0

Sandip Subedi
Sandip Subedi

Reputation: 1077

You can use jQuery in this case.

if ($(window).width() < 1000) {
   $("p").css("width","400");
}
if ($(window).width() < 1000) {
   $("p").css("width","600");
}

You can change the numbers as your wish.

Edit: As mentioned on the comment above, you can just use the media queries without using the Bootstrap framework.

Upvotes: 1

Related Questions