CODEWITHSUNDEEP
javascriptcss
bazinga
bazinga

Reputation: 901

Something like if in css

Is there something like IF in css? what i want to do is I want to set image width, if it is more then 700px I need to set it to 700, but if it is less, I need to leave it alone and set only 5px margin around it.

is this doable with css, or I need tu use javaScript?

Upvotes: 0

Views: 108

Answers (7)

Sudheer
Sudheer

Reputation: 2985

@media only screen and (min-width : 700px) {
   /* Styles for screen below 700px you can set your  margins*/
}
@media only screen and (max-width : 700px) 
{
  /* Styles for screen above 700px you can set without margins*/

}

Upvotes: 1

Yahyaoui Faouzi
Yahyaoui Faouzi

Reputation: 16

Use @ media with a resolution 

@media screen and (max-width: 700px) {}

more help : http://www.w3schools.com/css/css_mediatypes.asp

Upvotes: 0

AfromanJ
AfromanJ

Reputation: 3932

You do not need to use JavaScipt you can do it with the max-width property.

CSS:

img {
    max-width: 700px;
}

You can also use media queries for modifying elements for different screen widths if needed.

CSS:

@media only screen and (max-width : 700px) {
   /* Styles */
}

Upvotes: 0

Hariharan
Hariharan

Reputation: 3263

There is no IF in css. You can use javascript to achieve it or use max-width:700px.

Upvotes: 0

Igl3
Igl3

Reputation: 5108

Set max-width: 700px; the margin you have to do in javascript.

You can set the margin on the window.resize event something like this:

$( window ).resize(function() {
  if("your-element-width">=700){
     //remove your margin here
     }else{
     //add margin here
     }
});

Upvotes: 1

undefined
undefined

Reputation: 2101

img {
   max-width: 700px;
}

Something like that?
More info here

Upvotes: 0

matewka
matewka

Reputation: 10148

You can use max-width property.

img {
    max-width: 700px;
}

When it comes to margin I don't have a clue, yet. I'll try to figure it out.

Upvotes: 1

Related Questions