I've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}
Related
When I use the code width: 100%; Under the css code #media screen and (max-width: 768px) it does not make the element appear to be width 100% when I toggle the divicebar and shrink the deminsons to 768px it doesn't change the element.
On the other hand when I use flex-basis: 100% the code work why does that happen?
This code below works.
#media screen and (max-width:768px) {
.article-3{
flex-basis: 100%;
height: auto;
}
#media screen and (max-width:768px) {
.article-3{
width: 100%;
height: auto;
}
}
Does anyone know why this code above doesn't work?
My first question on this site. sorry if i did anything wrong
This is my #media query code;
#media only screen and (min-device-width:992px) and (max-device-width:1199px){
.container{
max-width: 100%;
min-width: 100%;
width: 100%;
}
}
I don't know why, but it's not working on different screens.
As i guess you want it to apply on window resize also, just change min-device-width and max-device-width to min-width and max-width, and it'll work as expected. This way it applies depending on the window width, not on the device width.
Moreover, device-width is now deprecated: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/device-width ;)
.container {
width: 200px;
height: 20px;
background-color: red;
}
#media only screen and (min-width:992px) and (max-width:1199px) {
.container {
max-width: 100%;
min-width: 100%;
width: 100%;
}
}
<div class="container"></div>
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
img.logo {
height: auto;
width: auto\9; /* ie8 */
left: 50%;
margin-top: -250px;
margin-left: -134px;
position: absolute;
top: 50%;
resize: both;
That's the code I'm using. It's a combination of resizing and centering, and yet it's only centering for some reason. I need the image to scale because, as it is currently, it's overlapping with an upper element of the page at very small browser sizes.
You can try using CSS media queries. Basically we define breakpoints based on screen width/browser width, and adjust the image widths accordingly.
img {
width: auto;
height: auto;
}
#media all and (max-width: 600px) {
img { width: 500px; }
}
#media all and (max-width: 500px) {
img { width: 400px; }
}
#media all and (max-width: 400px) {
img { width: 300px; }
}
#media all and (max-width: 300px) {
img { width: 200px; }
}
#media all and (max-width: 200px) {
img { width: 100px; }
}
See this example
Hope this can suit your needs
EDIT:
You could even combine the above suggestion with transform: translateX(-50%) translateY(-50%); to keep the image centered at all times. For instance:
img {
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#media all and (max-width: 600px) {
...
}
...
Here's an example
Use simple % for implementing the image width and height and the rest will take care automatically. The overlapping here I think is because the image is trying to maintain proportions with the auto attribute.
Or else you can try something like this in css
img.resize{
width:60%; /* Use either % or px*/
height: auto;
}
Similar problem was posted but the answers there did not help me.
I have a responsive web site in which the whole background is a mp4 format video. On desktop browsers there is no problem. The code for that is below
#media screen and (min-width: 400px)
{
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
}
And the media query for small screens is below
#media only screen and (max-width : 400px) {
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
video {
display:none!important;
}
}
The problem is when I view it on iOS Chrome and Safari the video is not hidden and is on the background with controls shown and not started.
What i want to do is if the width is at a max of 400 px , I want to show the jpg that is mentioned above.
I think you need to specify the element that should have the background. E.g:
#media only screen and (max-width : 400px) {
someelement{
background: url(../images/tanisalimmobilebackground.jpg);
background-size:cover;
}
video {
display:none!important;
}
}