Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
What is the correct method to use an image for different sizes. Like Thumbnail, Large Devices, Medium Devices and Small Devices? Mainly I'm using Bootstrap. I have used .img-responsive class. Is there any easy way to use the same image for these different screen sizes except calling different size images for different screen sizes? What is the correct common method to do such work?
Use the same width for all devices. Place the image in different column structures for different window widths (desktop, mobile).
For example, if you want an image to be 50% width of its container on desktop, and then 100% of its container on mobile, wrap your image in a single div that contains both respective columns:
<div class="col-md-6 col-sm-12">
<img src="example.png">
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm creating a row of highlighted products on my website. On desktop view I have 5 products. When I get to a medium size device, I want there to be 2 products and finally on mobile, 1 product. After reading Bootstrap's documentation on Grid System and Rows here I added the row-cols syntax and nothing happens. I'm sure I'm missing something but I can't figure out what it is. Also, in the codepen project I'm showing here, the product's info (image and text) get squeezed.
Here's my CodePen.
This is what it looks like in my computer, desktop view (it looks fine)
This is what it looks like in my computer when I make the screen size smaller. Not good.
Make changes to this version and u will have ur grid. And make sure u will use Bootstrap 4
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6 col-md-2">this</div>
<div class="col-sm-6 col-md-2">is</div>
<div class="col-sm-6 col-md-2">example</div>
<div class="col-sm-6 col-md-2">use</div>
<div class="col-sm-6 col-md-2">this</div>
</div>
</div>
The comment above did it:
Try this. Make two bootstrap layouts of these products in two different sections. One for larger screens and one for smaller screens. (For the smaller screens u can define 3 rows or 2 rows depending on your preference) But keep the small screen layout invisible. Add a media query to your CSS which will make the larger screen layout invisible and make the small screen layout visible upon reaching the breakpoint.
What you can do is define breakpoints using media queries. This way you can define how many rows should be there and how the columns should be spanned out depending on how small the screen is.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
What is better to use for responsive designs - .container class or .container-fluid class??
As per your requirement you should prefer container cause .container class provides a fixed width. .container has fix width for each screen size (xs, sm, md, lg). While .container-fluid expands to fill available width. Hence by using .container-fluid your elements on web page can become distorted. Your .container-fluid elements will resize for every small change in width of the browser.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I'm making an online portfolio, and my menu, which consists of 3 flip card images, needs to be able to work on touch screen devices. Since I don't want to change anything about the desktop menu, I was thinking of creating a completely new menu for mobile devices, which would mean discarding a section of my html code and inserting a new section.
I'm not sure how best to do this - for example, is it possible to create different index pages for different device sizes? Every time I try and search the answer to this I only find results about css media queries, which I'm using as well, but in this case it's the content I want to change. Any suggestions? Many thanks!
Erin.
Use bootstrap. Its a little bit of effort to learn this but it will be a asset for the lifetime. You will get lot of construct in it to make any webpage work on all the screens simultaneously.
Edit:
If you dont want to use bootstrap use the following media queries
#media screen and (max-width: 480px) {
.in-small-devices {
display: block;
}
.in-large-devices{
display: none
}
}
#media screen and (min-width: 480px) {
.in-small-devices {
display: none;
}
.in-large-devices{
display: block
}
}
Then apply it to the two divs that you want to show alternatively
<div class="in-small-devices"></div>
<div class="in-large-devices"></div>
With Bootstrap Grid classes you can define the width of a div on different screen (xs, sm, ...) sizes. For example you can hide whole codeblocks and display other html when on specific screen sizes.
<div class="visible-lg"></div> (visible on large screens)
<div class="hidden-xs"></div> (hidden on extra-small screens)
<div class="col-sm-6 col-lg-3"></div>
(at default 12 units are one row. This div will take 6 units space on small screens, but only 3 on large screens. This means 2 divs fit in row on small screens, but 4 divs on large screens)
take a closer look:
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
http://getbootstrap.com/css/#grid
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Currently working on a mobile version of a website. I have this:
body {
background-image : url("my_image.png");
background-repeat : no-repeat;
background-size: 100%;
}
The background image fills the whole device screen. Question. What size in px (width) will be best for smartphones? Currently thinking to go with a width for the background image of 640px. Is this ok? Any suggestion please?
Using background-size: cover or contain is usually the best way to go.
Big backgrounds could get cropped, though, so you could set background-position or a different background for different screen sizes with media queries, but the above usually works fine.
background-size properties:
cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image.
contain
Scale the image to the largest size such that both its width and its height can fit inside the content area.
Source
640px is the width of an iPhone, so it's one of the smallest widths. A Galaxy Note 3 for example has a width of 1080px. If you want to use an absolute image size, I would suggest to use a bigger one.
However best practice in my opinion would be to use a background image that stretches itself to match the screensize, like described in Sajad's answer.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm just a starter in html/css and I don't really know what should I use , I made some sites using % and it looked good in the beginning on my laptop screen (wide) but when I accesed the site at school the site was all looking weird cause the width was smaller and the height was bigger.
So my question is : Should I use px instead of % and what would be a good width to make a site with px.
900 or 960 px is almost always the way to go for your main content. You can however use percentages for some parts of your websites.
Like stackoverflow, you could have a main bar on top which has a 100% span across the page, whilst your content (the questions/answers) are within the 960px grid.
Take a look at http://960.gs/
Keep in mind you should also have to consider other screen sizes, so it might be wise to look at responsive webdesign ( http://en.wikipedia.org/wiki/Responsive_web_design )
However, it's up to what you want to accomplish to make the right decisions on what to use.
Pixels:
If you use pixels then, its an absolute measurement and will be rendered irrespective of the browser's window size.
Percentage:
Percentage is a relative measurement which will be rendered with respect to the browser's window size.
If you want to show some element to always appear in a fixed size, then use pixels, else use percentage.
The answer about the good width for a website is very well answered here:
What is the best absolute width for a webpage?
Refer the following article too. It will be helpufull to you.
http://www.sitepoint.com/best-size-website/