Consider the following HTML + CSS code:
html {
background-color: green;
margin: 0;
min-width: 320px;
min-height: 100vh;
}
body {
margin: 0;
}
nav#main-nav {
background-color: white;
height: 50px;
display: flex;
}
#container-logo {
width: 200px;
height: 100%;
flex-shrink: 0;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-logo {
width: 60px;
}
}
#container-logo a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#container-logo img {
content: url("http://www.dummymag.com//media/img/dummy-logo.png");
max-width: 90%;
max-height: 40px;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-logo img {
content: url("http://coachmikelee.com/wp-content/uploads/2014/11/dummy-logo.png");
}
}
#container-searchbar {
height: 100%;
width: 100%;
background-color: orange;
}
#container-loginstate {
width: 200px;
height: 100%;
flex-shrink: 0;
background-color: blue;
}
#media (max-device-width: 640px),
(max-width: 640px) {
#container-loginstate {
width: auto;
min-width: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template.css">
</head>
<body>
<nav id="main-nav">
<div id="container-logo">
<img>
</div>
<div id="container-searchbar"></div>
<div id="container-loginstate"></div>
</nav>
</body>
</html>
Basically it is a responsive Top Horizontal Navigation Bar template divided in 3 areas:
logo at left (white)
search bar in the middle (orange)
login state at right (blue)
As expected, if you resize the window, all this areas will resize accordingly. Including the media queries break-point at 640px.
Question
Although functionally the code is performing as expected, it seems to me that there is a lot of gimmicks through the CSS code in order to properly align and size the logo picture (ex: anchor tag as flexbox with width + height being set).
Is there a better way to do that?
i agree with you, its seem to be a bit too gimmicky. I used your code with inline-block, and floats, the problem is container-searchbar's width.
Related
so I am basically coding my website.
I made a container, where a text floats to the left and the img to the right. I set a min-width for the text so it gets responsive. The image size is also responsive. Once the screen width gets lower, the image does get under the text but not in the center. I tried using margin: 0 auto; but that didn't help either.
.container {
width: 88%;
margin: auto;
overflow: hidden;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
width: 60%;
float: left;
min-width: 300px;
}
#pic {
width: 40%;
float: right;
}
#pic img {
width: 100%;
}
<section id="showcase">
<div class="container">
<div id="text">
<h1> dummy text </h1> <button class="button_1">Kontakt</button> </div>
<div id="pic"> <img class="mypic" src="./img/menew.png"> </div>
</div>
</section>
Use flex rather than a float on your container, you will get a better response from it
.container {
width: 88%;
overflow: hidden;
display: flex;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
min-width: 300px;
}
#pic {
width: 40%;
}
#pic img {
width: 100%;
}
You can now change the width of your #text div to place where you want the elements
Media query as asked for responsive
#media (max-width: 750px) {
.container {
display: block;
}
}
I deleted #pic float and added auto margin + a min width
#pic{
width: 40%;
min-width: 300px;
margin: 0 auto;
}
and made a media query:
#media (min-width: 600px) {
#pic {
float: right;
}
}
I'm trying to make it so that the height is restricted to the height of the device the image is viewed on so that you can view the entire image without having to scroll down.
To accomplish this I've used:
.specific-image {
display: block;
max-height: 92vh;
max-width: 1240px;
}
So if the image is 500x1000 px, it'll take 92vh height and if it's 1000x500, it'll have width of 1240px and height (most probably) less than 92vh.
The problem with that is that if I resize the height of the browser the image scales down, however, if I scale the width, my browser will cut part of the image and I'll have to scroll horizontally to see the full image.
Not sure how to get the best of both worlds.
https://codepen.io/BozhidarSK/pen/NBKyyW
.specific-image-flex-container {
display: flex;
}
.specific-image-column {
flex: 4;
}
.specific-image-container-element {
text-align: center;
position: relative;
display: inline-block;
width: 100%;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 1240px;
}
.stickySpecificContainer {
position: relative;
z-index: 2;
display: inline-block;
}
<div class="specific-image-flex-container">
<div class="specific-image-column">
<div class='specific-image-container-element'>
<div class="stickySpecificContainer">
<img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
</div>
</div>
</div>
</div>
You want the image to be maximum 100% wide by default and 1240px if the screen is wider than 1240px. You can achieve the desired result using media queries:
body {
margin: 0;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
#media screen and (min-width: 1240px) {
.specific-image {
max-width: 1240px;
}
}
<img class="specific-image" src="https://dummyimage.com/1600x600/000/fff">
Same demo with square image:
body {
margin: 0;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
#media screen and (min-width: 1240px) {
.specific-image {
max-width: 1240px;
}
}
<img class="specific-image" src="https://dummyimage.com/600x600/000/fff">
give max-width:100% to the image instead of the pixel value, the percentage value will make sure that max width of the image 100% of the document.
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%
}
.specific-image-flex-container {
display: flex;
}
.specific-image-column {
flex: 4;
}
.specific-image-container-element {
text-align: center;
position: relative;
display: inline-block;
width: 100%;
}
.specific-image {
display: block;
max-height: 92vh;
max-width: 100%;
}
.stickySpecificContainer {
position: relative;
z-index: 2;
display: inline-block;
}
<div class="specific-image-flex-container">
<div class="specific-image-column">
<div class='specific-image-container-element'>
<div class="stickySpecificContainer">
<img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
</div>
</div>
</div>
</div>
92vh is 92% of the view height. vw is used for view width.
.specific-image {
display: block;
max-height: 92vh;
max-width: 92vw;
}
I can't seem to hide the #right image on my iPhone. I want it to display on my webbrowser, but not on small phones.
Edit I've tried visibility: hidden !important;
I've tried screen and
I've tried display: none
I've tried hiding by class name
Thanks!
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style>
html {
width: 470px;
height: 725px;
}
div {
position: absolute;
left: 150px;
top: 75px;
width: 70%;
}
#left {
width: 300px;
height: 700px;
}
#right {
position: absolute;
width: 300px;
height: 700px;
right: 10px;
z-index: -1;
}
#title {
position: absolute;
top: 10px;
left: 31%;
width: 330px;
height: 90px;
}
#rightP {
position: absolute;
width: 75%;
left:30px;
}
#cross {
position: absolute;
top: 610px;
left: 48%;
width: 30px;
height: 30px;
}
#media screen and (max-width: 600px) {
#right{
display: none !important;
visibility: hidden !important;
}
.mobile-hide {
display: none;
visibility: hidden;
}
}
body {
min-width: 300px;
background-color: #f1e2c1;
}
</style>
<body link="#000000" vlink="#808080" alink="#FF0000">
<img id="title" src="images/title.jpg">
<img id="left" src="images/left.jpg">
<img class="mobile-hide" id="right" src="images/right.jpg">
<div>
<p >
</p>
</div>
<img id="cross" src="images/cross.jpg">
</body>
</html>
In the code of the stylesheet on your website, you have this line above your media queries:
//small screen sizes
// is NOT to be used for CSS comments ( but only in PHP and JS)! In fact, this messes up your code, since the browser thinks it's some kind of CSS and can't handle it (and all the other code following it).
So just change that line to
/*small screen sizes*/
and it will work.
I strongly recommend you not to use id's while using css as classes tend to do all the work required without that level of specificity, for this example all you need to do is switch the display with visibility
#media screen and (max-width: 600px) {
#right {
visibility: hidden !important;
}
}
Hope This helps!
Add a media query for that specific element, or create a class called mobHide and create something like the following
Element
#media screen and (max-width: 767px) {
#right {
display: none !important;
}
}
Class Specific - Apply .mobHide class to anything you want removing on mobile devices.
#media screen and (max-width: 767px) {
.mobHide{
display: none !important;
}
}
I am using the following code to create a page layout. I get the container div height fit to the window height, but when I resize the window height, all contents are squeezed together vertically. How could i fix the height and width of the container div?
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 800px;
height:100vh;
background-color: azure;
}
#rw1 {
height: 10vh;
background-color: aliceblue;
}
#rw2 {
height: 80vh;
background-color: #ff6a00;
}
#rw3 {
height: 10vh;
background-color: #808080;
}
</style>
<div id="container">
<div id="rw1"></div>
<div id="rw2"></div>
<div id="rw3"></div>
</div>
Quite an open-ended question but I think you'll probably want to experiment with media queries, spcifically using a combination of max-width and max-height as follows:
#media (max-height: 300px) {
#rw1 {
height: 33vh;
background-color: aliceblue;
}
#rw2 {
height: 33vh;
background-color: #ff6a00;
}
#rw3 {
height: 33vh;
background-color: #808080;
}
}
Can also combine max-width / max-height as follows:
#media (max-width: 767px), (max-height: 300px) {
#container {
width: 750px;
}
#rw1 {
height: 33vh;
background-color: aliceblue;
}
#rw2 {
height: 33vh;
background-color: #ff6a00;
}
#rw3 {
height: 33vh;
background-color: #808080;
}
}
Here's a fiddle: https://jsfiddle.net/9vwe255a/
Try resizing the Results pane in both width and height, you'll notice the div's change size according to the viewport.
I have a problem with the display: none and visibility options in HTML/CSS
I have the scenario set up here
https://jsfiddle.net/vntkpus6/5/
HTML:
<!doctype html>
<body>
<div class="grabber"></div>
</body>
</html>
CSS:
#media (max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
There must be something I must be missing, it seems like when I resize the window to 800px the square should become visible, yet it doesn't work.
Can anybody tell me what I'm doing wrong? Thanks
Move your #media query below the .grabber rule set. What is happening is that your second definition of .grabber is overriding what is in the media query. It's just the way CSS works!
You should to use min-width, it mean "if the width more than 800px use it"
#media (min-width: 800px) {
.grabber {
display: none;
}
}
.grabber {
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat
}
Here you should use media query after .grabber.Please let me know after doing in below way all things work perfectly or not.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>OFFSET</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="grabber"></div>
</body>
</html>
CSS CODE:
.grabber {
display: none;
position: fixed;
top: 0;
right: 0;
height: 40px;
width: 40px;
background-color: red;
background-repeat: no-repeat;
}
#media all and ( max-width: 800px) {
.grabber {
display: block;
visibility: visible;
}
}