I have a div class called form-groupBlogg
It is a form in which I want to adjust the width of it in both ordinary computer and mobile version. I have written the following CSS:
.form-groupBlogg{
width:74%;
margin-top:20px;
}
#media screen and (max-width: 768px) {
.form-groupBlogg {
width: 80%;
}
}
Only problem is that the #media screen and (max-width: 768px)-part wont adjust the width of the div class in the mobile version. The first part with the width: 74% works correctly. How can I adjust the width in the mobile version?
NEW answer:
I guess you just want a wider form on the small screens.
Your site is adjusted in a wrapper, so the width:80% is small on a small screen. Try to adjust the width of the form-groulBlogg and form-group to 100% on the smallest screens. Looks better in my tests.
Try:
#media screen and (max-width: 500px) {
.form-groupBlogg {width: 100%;}
.form-group {width:100%;}
}
Related
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I have a logo in my header that's too small. I found this piece of code where I can increase the size but I only want it to apply to computer screens and not to mobile or tablet. The code is:
.site-title img {max-width:100%; height:auto}
.site-description {display:none}
I want to change the 100% to 200% but only on computer screens.
Can somebody tell me which code makes that happen?
Responsive Web Design, using media-queries:
#media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
Media Queries are used to apply CSS rules to only matching devices. Specify a max-width or min-width to apply the style rules to.
#media screen and (min-width: 720px) {
body {
background-color: skyblue;
}
}
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
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.