In a piece of angular JavaScript, there is an ng-repeat mand that prints a line of small images.
I need this line to not overlap into two lines when the browser window is re-sized. Thus, if the size gets too small, instead of pushing some of these down into a second line, it should just hide them or remove some of them.
How can I go about acplishing this?
Is it possible to do this using only CSS?
In a piece of angular JavaScript, there is an ng-repeat mand that prints a line of small images.
I need this line to not overlap into two lines when the browser window is re-sized. Thus, if the size gets too small, instead of pushing some of these down into a second line, it should just hide them or remove some of them.
How can I go about acplishing this?
Is it possible to do this using only CSS?
Share Improve this question asked May 15, 2015 at 14:58 EternalWulfEternalWulf 7739 silver badges21 bronze badges 5- Please make an effort and return with a specific question. – isherwood Commented May 15, 2015 at 15:00
- It's called "responsive design". – Marc B Commented May 15, 2015 at 15:01
- The best I can help you is to look into media queries and display , visiblity property of css. – Abhinav Gauniyal Commented May 15, 2015 at 15:01
- Possibly Looking for this -> stackoverflow./questions/11962837/… – Kighted Commented May 15, 2015 at 15:02
-
you can simply use css3
@media queries– Kheema Pandey Commented May 15, 2015 at 15:13
3 Answers
Reset to default 9Yes, it is possible with only css. You will have to use media queries and decide the ranges in which you want your elements to appear and disappear
@media (min-width: 500px) and (max-width: 600px) {
myelement {
display: none;
}
}
@media (min-width: 700px) and (max-width: 1000px) {
myelement {
display: block;
}
}
These will also handle when the browser is resized.
This is called responsive design. You'll want to use CSS media queries or a CSS library like bootstrap which has responsive classes to hide/show elements based on target window/device size.
Media query example:
@media (max-width: 700px) {
img#yourImage {
display: none;
}
}
Working media query demo: http://codepen.io/Chevex/pen/oXxKLe
Bootstrap example:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body>
<img class="hidden-xs" src="http://i.imgur./1XKZPVe.png" />
</body>
</html>
Working bootstrap demo: http://codepen.io/Chevex/pen/ZGWgpb
Bootstrap is just using media queries in its own stylesheet. It's just nice to have a stylesheet with predefined classes for a range of different devices so you don't have to craft your media queries yourself :)
Yes it can be done with css
@media (min-width: 700px) {
.myClass{
display: none;
}
}