Hi I'm fairly new to bootstrap and what I'm trying to achieve is to have a jumbotron on top of my page with different paragraph formatting to accommodate for a background image which takes lets say 30% of full width space.
I have offset my text by padding-left: 300px; and it looks fine on desktops but this rule also applies to a paragraph in mobile device mode resulting it being very skinny and tall.
Is there a way where I can set lets say 3 different paragraphs each showing under certain screen size?
Just use media queries:
#media screen and (max-width: 320px)
{
p{
padding-left: 0;
}
}
#media screen and (min-width: 321px) and (max-width:800px)
{
p{
padding-left: 100px;
}
}
#media screen and (min-width: 801px)
{
p{
padding-left: 300px;
}
}
Related
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
Been fussing around with grid for a while trying to figure out if this is possible without much luck.
I'm working on a website in which everything is arranged within a strict background grid of 12px square, which is also used as the base font size, so 1rem = 12px. In order to maintain the vertical rhythm, I need to make sure that all elements, including padding and margin and borders, end up with widths and heights at some multiple of that base grid size.
For text content like paragraphs and headings this isn't super difficult, as long as the line heights are all set to 1rem, 2rem, 3rem, etc. For images, however, I struggle to see how to force it to a multiple of the grid size without a bit of javascript.
Not that I can't use javascript, but I don't really want to.
So say I have an <img> with an original size of 100px by 100px. Is it possible to restrict it to 96px (8rem) or 108px (9rem), or maybe place it within a larger container and enforce the restrictions on the container instead? grid-auto-rows: 1rem doesn't seem to do the job (since the element only ever creates 1 implicit track), and neither does grid-template-rows: repeat(auto-fill, 1rem).
You could use css #media queries to give your images specific sizes at specific breakpoints.
#media only screen and (max-width: 640px) {
img {
height: 6rem;
}
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
img {
height: 7rem;
}
}
#media only screen and (min-width: 801px) and (max-width: 960px) {
img {
height: 8rem;
}
}
#media only screen and (min-width: 961px) and (max-width: 1024px) {
img {
height: 9rem;
}
}
#media only screen and (min-width: 1025px) and (max-width: 1200px) {
img {
height: 10rem;
}
}
#media only screen and (min-width: 1201px) {
img {
height: 11rem;
}
}
I am creating a responsive landing page. I have mentioned different settings for different screen size in CSS. I have mentioned 3 screen sizes, i.e. max-width 320, max-width 375 and max-width 780. However phone having screen width 320 is taking the properties of screen width 375px from the css.
<style>
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>
As per the above code, a phone having max-width 320px, should take the height 95px. Similarly a phone having max-width 375px should take the height 55px. However a phone with max-width 320px is taking height 55px (which is actually for max-width 375px).
the correct order should be like this:
#media only screen and (max-width: 780px) {
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
#media only screen and (max-width: 375px) {
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
#media only screen and (max-width: 320px) {
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
The order of your media queries matter in css! Check here to know more about it.
Why does the order of media queries matter in CSS?
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
I think you need to take a moment to analyze what your code is doing.
#media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}
What this does is if the browser window size is upto 320px then apply the styles within the block
#media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}
This applies styles for the window screens with max-width 375px. The gotcha here is that if the screen width is 320px then it is not greater than 375px and hence both the styles in the media query is applied and the existing ones are overridden in the order they are parsed.
if you want some styles to specifically for screens that are greater than 320px but less than 375px then you would use
#media only screen and (min-width: 320px) and (max-width: 375px)
The Goal
The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example
Screen Size Boxes Percent Width
1250px 3 33.3
750px 2 50
500px 1 100
Current Progress
I have created the grid system and the media queries
/* Max Width 1250px */
#media screen and (max-width: 1250px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media screen and (max-width: 750px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
The Problem
I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?
JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/
I've had a similar problem before.
You should use both min-width and max-width to set lower and upper bounds respectively.
Also your first two are redundant. Both give the .boxes class a width of 50%. It would be better to combine them into one, that serves both viewpoints
/* Max Width 1250px */
#media only screen and (min-width: 501px) and (max-width: 1250px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Using the above syntax is a great way to prevent confusion.
Edit: Media queries only work on ie9 and above. If you are using an older browser, the above will NOT work.
Second Edit: It looks like in media queries you need to add only before the type. For example
#media only screen instead of #media screen
I have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.