I have a website that is totally responsive however there is one part that is not ans is situated below the slogan URBAN FREE SPIRIT (I am talking about the images)
I tried to had the class container, the class img-responsive but nothing seems to work ..
Here is my website, it will be easier to have a look through the inspector I think than with copy paste
http://v1954132.caqoajqezbu9.demo42.volusion.com/
.home-stage-v2 isn't responsive.
.home-stage-v2 {
width: 1000px;
height: 1200px;
position: relative;
margin-top: 25px;
}
Apply media queries for it for the various widths.
#media (min-width: 1200px) {
.home-stage-v2 {
width: 1000px;
}
}
#media (max-width: 1199px) {
.home-stage-v2 {
width: 100%;
}
}
Example above. You will also have to rework the images as they're with fixed width and also don't respond to width changes. I'd suggest reworking them into either percentages or putting them into a grid.
http://getbootstrap.com/examples/grid/ for examples on grids.
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
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.
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
I have the following simple HTML and CSS code with media queries which you can also find in the JSfiddle here:
/* Screenwidth as variable */
:root {
--min-width: 1041px;
}
/* homepage */
#media screen and (min-width:1041px){
.homepage {
height: 500px;
width: 400px;
}
}
#media screen and (max-width:1040px){
.homepage {
height: 300px;
width: 100px;
}
}
/* faq */
#media screen and (min-width:1041px){
.faq {
height: 800px;
width: 600px;
}
}
#media screen and (max-width:1040px){
.faq {
height: 700px;
width: 550px;
}
}
<div class="homepage">
Here goes content of homepage.
</div>
<div class="faq">
Here goes content of faq.
</div>
As you can see in the code I will have different pages on my website and they should have a different size depending on the device that is accessing the website. The media queries itself work perfectly already.
However, since I will have a lot of those media queries within in my CSS and I might want to change them to different sizes to test and try things it would be great to have the min-width and the max-width as variable within the :root part of the CSS.
Do you know if this is even possible and if yes how I have to change my code to make it work?
No, you can't use the css native variables in media query.
The :root, that is the element is a top-level parent. The other child elements can inherit from the root but the media query is not an element,
This can't be done through css.
you can use preprocessors like sass to accomplish this.
I have 2 divs (logoarea and navarea) inside a bigger div (id=header). How do I make navarea be fluid (resize if the page is resized) without making it overlap into div logoarea? I'm new to stack overflow and its formatting is a bit confusing, so ill just leave a jsfiddle link with my code, I think it's better anyway. Help is greatly appreciated, here is my code(All of my code including the HTML is on the jsfiddle link):
#navarea {
width: 630px;
height: 100px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
}
http://jsfiddle.net/070zgvq2/
Well you can resize them using media queries like this-
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#navarea {
/* change size */
}
}
This will work for devices that have screens less than 480px wide.
Also i'd recommend not using pixels but percentages for sizes to make it more responsive!
Hope it helps.