I have used a media query to hide an element when the screen size decreases. I set max-width to 780px.
`#media only screen and (max-width: 780px) {
/* the container for #left and #right elements */
.container {
width: 300px;
height: 400px;
overflow: auto;
}
/* the element to be hidden */
#left {
display: none;
}
/* this element should then take up the whole width of the container */
#right {
width: 300px;
height: 400px;
border-radius: 2%;
}
}`
It behaves as per the media query only at about 770px and below.
I have also included bootstrap classes col-sm-12 col-md-6 for #right.
Between 780px and 770px, #left gets hidden but the #right does not occupy the full space of .container. Instead, #right takes up the first half space of .container, where #left should be and the original space of #right is unoccupied.
What is this unwanted gap and how do I eliminate it?
There are two things min-width and max-width and it functions as
if you use (min-width:768) it means that the design will be applied to the screen width greater than 768px, i-e: from 768px - infinity.
if you use (max-width:768) it means that the design will be applied to the screen width less than 768px, i-e: from 0 - 767px.
Coming back to your question.
.container {
width: 300px;
height: 400px;
overflow: auto;
}
Here you are specifying the width of container as 300px, change it as
.container {
max-width: 100%;
width: 100%;
height: 400px;
overflow: auto;
}
Similarly,
#right {
width: 100%;
height: 400px;
border-radius: 2%;
}
Please let me know If it helps.
Try changing the width to 100% and it should work.
#right {
width: 100%;
height: 400px;
border-radius: 2%;
}
Related
What can I do to make the body cover the whole page? In my CSS for body and html height and width 100%.
With the mobile version, the body is reduced in this way
With the pc version, everything is fine with the width, but the height is not on the whole page
html {
overflow: auto;
height: 100%;
width: 100%;
}
body {
background-color: #1c1c1c;
font-family: 'Press Start 2P', cursive;
}
Here is my full html and css
and if you can tell me what else can be corrected, I will be very grateful
many of your elements have fixed width in px, which doesn't change in the media query. E.g. you have:
.container {
width: 890px;
...
}
.menu__list {
...
width: 700px;
}
You need to change them in your media query
#media screen and (max-width: 450px) { ... }
Personallly I'd keep only the container width in px for desktop and other things in percents, then in mobile versions I'd keepp them all in percents like
.container {
width: 100%
}
Or sometimes
.container {
width: 100%
max-width: 320px;
}
Basing on the first code you posted.
Modify your container class css (Desktop) since its inheriting from wrapper.
.container {
margin: 0 auto;
}
Your current css ( remove width & padding )
.container {
width: 890px;
margin: 0 auto;
padding: 0 20px;
}
Mobile is fine, its just inheriting the screen size of the emulator.
I wanna make a image responsive but only till to an specific width of the screen. Say if the user starts from 300px width to enlarge the screen the image should be responsive and should grow with the screen width. Once a width of 1440 px is achieved the image should stop with adapting the scale. Imagine a image in the following code
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
</style>
<div class = "left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
At an specific display width the image should stop to be "responsive" and should hold the last size which the image had. How can I do that?
You can use max-width css property. Documentation
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
max-width: 1400px; // anyvalue here
}
.image-position{
max-width: Enter width of your choice here;
}
Max width in css is used to define the maximum width an element can have. The element will stop becoming wider after the max-width is achieved.
Thanks😊
You can use two ways. First, check what is width of image in specific window width and then use this:
#media screen and (min-width: 1440px) {
.image {
width: 600px; //define image width
//here set all other parameters, fixed position etc.
}
}
Second way is to use JavaScript. When window is in needed width then get image's width and write it into style. If you need, I can add JS code for this.
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
#media screen and (min-width: 1440px) {
.icon-position {
width: 700px; /*Instead of width: 700px, you can define you own desired width of the image, after 1440px screen size.*/
}
</style>
<div class="left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
I have two divs. One is 15%, and the other is 76%. I want to hide the 16% div on mobile phones. That is being achieved using this.
class="navbar hidden-xs"
And the code is as follows
#right {
top: -1px;
position: fixed;
background: blue;
width: 15%;
}
However, when I change the screen size, the box is getting hidden but the space remains there. I want to make the width of the content to 100% in mobile-only. How can I achieve this? My code for the content is as follows:
#content {
float: right;
width: 76%;
}
#media (max-width: 767px) {
#right {
display: none;
}
#content {
width: 100%;
float: none
}
}
I am new to CSS and HTML and I am pretty lost with this one. I would like to have a screen divided to two halves, while one of them has width equaled to 50% of maximized browser screen. While the other one will be flexible. So when you set the browser width to half, one of the contents will be fully visible, while the other one will be completely hidden. Of course I want this to be same for every resolution out there.
Same as foursquare: https://foursquare.com/explore?mode=url&near=New%20York%2C%20NY%2C%20United%20States&nearGeoId=72057594043056517 (maps is being hidden, and bars info is not affected until browser's width is less than 50%).
Here's the sample:
body {
width: 100vw;
height: 100vh;
}
/*width must be 50% of browser's maximum width, same as bars on foursquare*/
.lefthalf {
float: left;
background-color: black;
width: 50%;
height: 100%;
}
/*width is between 0-50% of browser's maximum width, same as map on foursquare*/
.righthalf {
float: right;
background-color: red;
height: 100%;
width: 50%;
}
<div class="lefthalf"></div>
<div class="righthalf"></div>
You can do something like this with the Flexbox:
html, body { /* modified */
width: 100vw;
height: 100vh;
margin: 0; /* recommended */
}
body {
display: flex; /* displays children inline by default */
}
.lefthalf {
/*float: left;*/
background: black;
flex: 0 0 750px; /* adjust to your needs / doesn't grow nor shrink with the initial width of 750px */
/*height: 100%;*/
overflow-x: auto; /* optional / enables horizontal scrolling if the content is wider than 750px (in this case) */
}
.righthalf {
/*float: right;*/
background: red;
/*height: 100%;*/
/*width: 50%;*/
flex: 1; /* takes the remaining horizontal space */
}
#media screen and (max-width: 1000px) { /* adjust to your needs */
.lefthalf {flex: 3} /* always three times wider than the .righthalf between 601px and 1000px screen width */
.righthalf {flex: 1}
}
#media screen and (max-width: 600px) { /* adjust to your needs */
body {
flex-direction: column; /* recommended / stacks children vertically */
}
.lefthalf,
.righthalf {
flex: 1; /* optional & recommended / each takes half of the body height */
}
}
<div class="lefthalf"></div>
<div class="righthalf"></div>
The .lefthalf needs to have a static width in px, it won't work with the defined 50% or 50vw because its width will change according to the browsers width.
What I'm working with now http://pastebin.com/3CSs2tCA
You can paste it in here. http://htmledit.squarefree.com/
In Firefox, if the window is less than 786px wide, the logo gets smaller and keeps its ratio. In Chrome (and my phone), the image keeps its height and gets squished skinny. No idea what to change to fix it.
Thank you to a kind person on Freenode's #css channel for the answer.
Old code:
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
height: 100%;
width: 100%;
min-width: 75px;
min-height: 75px;
}
changed height to max-height: 100%, and width to auto.
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
max-height: 100%;
width: auto;
min-width: 75px;
min-height: 75px;
}