I am working on forums and want to make it responsive.
I have kept container's width as 800px.
What should the min-width and max-width be in media queries so that it will work on all devices?
If you want your CSS layout to work on all devices use Fluid-Fluid-Fluid CSS layout.
Example:
Instead of writing:
width:800px;
you can use:
width:78%;
Related
What I'm trying to do is same margin between div container on different resolution. I'm using vh as a margin unit between container but it's not responsive like 2vh is ok for 1000px width and greater resolution but it looks bigger between 600px to 999px width resolution . So I opted to use media query but I think this is not efficient is there other way to make the margin looks the same on different resolution without using media query?
Sometimes vh doesn't work as expected. You could try to use percentages but you have to understand it is very hard to get it similar without media queries because of the different ratios in different screens. If you would like it to be a set amount of pixels you can use min-height and max-height in a margin container.
I made a small website where width of certain elements are given in vw. It looked all good in my laptop. But when viewed in a 1920 screen, I could see the content is over stretched. I want to know if there is a way to stop viewport width and viewport paddings I have used in my website to stop stretching the elements after a while.
You can achieve this by setting max-width: value to your container in you css file
Also to set diverent styles after certain screen width you can yuse media query
#media(min-width: 1000px){
//your style
}
I'm creating a website and it's not fully response - I accept it.
I want to set minimum width for overall page to something like 1000px and display horizontal scrollbar if screen width is below this. I tried to use:
#media (max-width: 1000px) {
body {
min-width: 1000px !important;
}
}
But it's not working, scrollbar appears but my DIVs getting messed. I'm using Bootstrap 4 with sass, is there any way to force this behavior?
Of course, I'll create fully responsive site later, but now I want to archieve this for mobile and tablets. Currently, my navbar under 1000px is totally broken.
EDIT: Example codepen with my navbar code, under 992px it gets broken: https://codepen.io/anon/pen/vJgGma
The elements in your nav always hit 100% width below 992px so they're going to wrap no matter what you do.
You need to define widths for your nav elements below 992 if you want it to stay at 1000px wide. Try setting them to percentages that equal 100% and you should be fine.
I want to adjust the height of a div with it's content. if I use something like min-height: 100px; when the screen will be smaller (in a mobile device) the div will be too much big for the screen. How can I do this ?
Any help will be very appreciated.. Thank you
EDIT : my content is a background-image
You can set the height to be 100% instead of a pixel value. There are some nuances with this approach regarding cross-browser support.
This is a good answer to fix the issues with percent heights.
You can also use responsive styles via media queries on the viewport height and width. This is a good tutorial for that as well.
When coding responsive designs my advice is to try using percentage values, besides meta tags or media queries. For example min-height: 10%;
Try to use viewport meta tag
Read more here -->
Using the viewport meta tag to control layout on mobile browsers
display:block
You can apply this style to your 'div'.
The grid layout of my site changes relative to the width of the browser viewport by using CSS3 Media Queries.
But now I'm looking for a way to change layouts of specific blocks in my grid. So they behave differently relative to the width of their parent element.
For example, if the parent element is +500px wide, I can show titles with thumbnails, if the parent element is less than 500px wide, only titles are shown, in a bigger font-size.
If even possible, what's the best approach for this? Preferably without the use of JavaScript.
This approach should allow me to write one block of HTML that could be reused on any site, anywhere on a page, with or without a responsive layout.
if you're using media queries already, just add what you want to them;
regular css:
.parent .child .thumbnails,.parent .child .titles{display:block} -500px
-500 px css:
#media only screen and (max-width :500px) { .parent .child .thumbnails{display:none;}