this is a screenshot of my website
Hi! I am currently learning front end developing languages. I want to move my image to where the div.kitchen-image container is... but it will not move. My code at queries is this:
/*media queries*/
#media only screen and (max-width: 600px) {
nav{
display: flex;
flex-wrap: wrap;
line-height: 2;
}
.logo {
margin:0 auto;
}
.nav-links ul li a{
margin-left:15px;
}
.kitchen-image {
height:200px;
}
.main-pic{
width:400px;
}
}
tried changing the width and height of the image itself, but still no result.
You can use the CSS property transform: translate()
use this CSS in the Image's class
eg: The co-odinates given below are just an example.
.kitchen-image {
height:200px;
transform: translate(50px, 100px);
}
Related
I have a responsive video on my page and I've set to to adjust to a static background image when the display reaches below 767px width (for smartphones).
Problem is, that anything between 768px to 1199px (width) eg. on iPads, my video DIV container height does not respond to, causing a white margin below the video. Ideally the container should adjust from 266px - 347px (height) in parallel with the video height/width.
.videobg is my container and .videoheader is the video itself.
Here is the code:
.videobg {
margin:0;
padding:0;
width:100%;
height:100%;
position: static;
z-index: -100;
min-height: 250px;
max-height: 423px;
}
.videoheader {
margin:0;
padding:0;
width:100%;
height:100%;
}
#media (max-width: 767px) {
.videobg {
background: url('images/home/header.jpg') center center / cover no-repeat;
height:266px;
}
.videoheader {
display: none;
}
}
#media(max-width:768px){
.videobg {
height:266px;
}
}
#media (max-width: 884px) {
.videobg {
height:280px;
}
}
#media (max-width: 1000px) {
.videobg {
height:347px;
}
}
For this certain case it looks that solution will be:
.videobg {
font-size: 0px;
}
I strongly recommend using other scaling for responsive videos (e.g. like this) and, oh dear, so many media queries! :D
But, duh, if it works for you it's fine.
I'm trying to create 3 divs with the middle div having 2 divs inside side by side. The issue I'm having is that at screen size >768px the 2 divs inside are being squished rather than 100% width? Any help is greatly appreciated!
https://jsfiddle.net/z3q2wtLf/embedded/result/
The below code is an example of what I'm trying to achieve but there something I'm not catching in the fiddle above thats preventing the below result.
#panel1 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:50%;
height: 20px;
background: #ff0000;
}
#right {
float:right;
width:50%;
height: 20px;
background: #0000ff;
}
#panel2 {
width:100%;
height:100px;
text-align:center;
background: #000000;
}
<div id="panel1">
</div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="panel1">
</div>
Give this a look: https://jsfiddle.net/z3q2wtLf/29/embedded/result/
I switched the media to:
#media only screen and (min-width: 768px) {
body { display: block; }
}
On the container CSS, I added: min-height: 460px !important; (The "important" notation may be unnecessary, but it worked and I didn't bother testing without it.)
Then in your actual HTML, I fixed a spelling error where you wrote "containter" instead of "container"
And, finally, I switched #panel1 to .panel1 and changed the top and bottom divs to <div class="panel1"></div> instead of <div id="panel1"></div>. In HTML, you are NEVER supposed to give two elements the same ID. Hence why I changed the ID to a class. (You can reuse classes as much as you want.)
In your CSS, you have a line:
#media only screen and (min-width: 768px) {
body { display: flex; }
}
This is the cause of your issue.
To go off of what QuestionMarks said
#media only screen and (min-width: 768px) {
body { display: flex; }
}
Instead of it using flex to display your divs, you need to use this one:
#media only screen and (min-width: 768px) {
body { display: inline-block; }
}
The key here is using display: inline-block; to display divs side by side.
I have a web page and menu made with element at the bottom of it (inside some DIVs):
.nav {
position: relative;
margin: 2px 0;}}
On smaller screens Id'd like to move menu to the top of the page.
I've added to CSS:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
and tried different settings for the position tag (top, absolute, ...) to no avail.
Please help.
try this:
#media screen and (max-width: 600px) {
.nav {
position:fixed;
top:0px;
left:0px;
min-height: 40px;
}
instead of:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
You always end a css line with a ; and than you can enter the following line. You don't end a line with a , like you did after position:fixed;
and remove the second } in your first rule;
.nav {
position: relative;
margin: 2px 0;
} /*one } and not two*/
I also have a small tip. I don't know what browser you are using but user the webconsole (F12 for the most browser). If you made a mistake it will be visible there.
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.
all i am new here and i was trying to make responsive header image and to some extent i have done with using this "dislay none "technique
#img1{
display:block;
}
#img2{
display:none;
}
#media screen and (max-width:480px){
#img1{
display:none;
}
#img2{
display:block;
}
}
so this is the technique that i am using but it doesn't maintain the qualtiy what i think so can you please tell to make a header image responsive that is shorter than this method
thanks in advance
Why not use background images?
.header {
background: url(img1.jpg);
width: 100%;
height: 200px;
}
#media screen and (min-width: 768px) {
.header {
background: url(img2.jpg);
}
}