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.
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
Good afternoon, I am making a page layout using tables on HTML, but there's an issue that I'm stuck with. One of the instructions is that the images resizes according to the screen size, but I'm not allowed to use JS or CSS, only HTML. I have an idea on how to do it with CSS, but I'm not allowed to use it.
What I've tried until now is:
<td width="35%" height="10%"><img src="https://blog.udacity.com/wp-content/uploads/2020/06/HTML_Blog-scaled.jpeg" width=100% height=100%></td>
The problem is that the height in the <td> doesn't seem to change anything. The goal is that the image proportionally resizes, not getting like too thin or too large depending on the screen size.
For Mobile
#media screen and (max-width: 540px) {
img {
width: 50px;
height : 50px;
}
}
For Tablets
#media screen and (min-width: 540px) and (max-width: 780px) {
img {
width: 80px;
height : 80px;
}
}
Here is the demo. https://codesandbox.io/s/objective-swartz-tuo1t
I use this react Masonry layout component to achieve the Masonry grid to store my images. https://www.npmjs.com/package/react-responsive-masonry
According to the doc, we can specify columnsCountBreakPoints to make the component contain different number of columns according to the breakpoint where "Keys are breakpoints in px, values are the columns number"
However in my demo, where I set columnsCountBreakPoints to be { 350: 1, 750: 2, 900: 3 }, it always only shows one column, which should have been the case when viewport width is 350px.
I spent a lot of time debugging but couldn't seem to find the reason. I suspect it was because somehow the css I wrote make my viewport width always be below 350px but I am not sure. I really hope someone can point out the problem here for me.
You can apply the css with #media screen
.masonry {
#media screen and (min-width: 900px) {
.grid-sizer { width: 33%; }
}
#media screen and (min-width: 750px) {
.grid-sizer { width: 50%; }
}
#media screen and (min-width: 350px) {
.grid-sizer { width: 100%; }
}
}
I'm trying to understand CSS a bit and I'm currently somewhat stuck with #media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 10px;
background-color: brown;
}
#media screen and (max-width: 9999px) {
section {
background-color: red;
}
}
#media screen and (max-width: 1000px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Just using a simple
<section>
bla
</section>
HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6
However, it does not work like I'd want it to.
For the yellow background (< 500px), it stays yellow until 500 included.
For the blue background (>= 500px && < 1000px), it stays blue until 1000 included.
For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?
It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:
#media screen and (min-width: 501px) and (max-width: 999px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.
Hope this helps!
i thing the perfect responsive media query tag is this one
#media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
width: 60%;
}
}
you want to wright to css according to media screen .
Try it it's helpful for creating responsive layout .
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;
}
}