i have a website done in html and css, I have used media query coz in mobile view one row in my website was showing wrong alignment, so id did the following code for mobile devices:
#media only screen and (max-width: 600px) {
#zayan {margin-left: -20%;}
#amir {margin-top: -20%; width: 100px;}
#amir h5 {font-size: 12px; margin-left: -40%;}
}
now I checked this in my redmi note 8 mobile and it was showing perfect, but when i checked it in my redmi 7 and another device its coming wrong,
can anyone please tell me what could be wrong here. thanks in advance
I've tried it on my devices and I hope this works for you
#media all and (max-width: 600px) {
#zayan {margin: auto; }
#amir h5 { font-size: 12px; }
#amir { margin-top: -20%; }
.card-body{ padding: 0px !important; }
}
Related
I am new to web developing and I began making a webpage, however, I designed it for a desktop before mobile. Now I am trying to use media queries but my editor (VS studio) is not picking up on the media queries. When I write "# media screen and (max)"screenshot of code it does not give me the option to put in "max-width." I checked all my code and it is correct until there so I do not know why it is not working. I have attached screenshots and a codepen link. Any help is appreciated.
https://codepen.io/jayson-caguana/pen/BajWxZQ
/* FOOTER */
footer {
background: burlywood;
padding: 20px 20px;
font-size: 12px;
color: gray;
text-align: center;
}
#media screen and (max-width: 300px) {
.features {
background-color: blue;
}
}
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
The homepage/index.html seems fair enough to launch as-is for the time being. But when I look at it from chrome on mobile, all the lettering is too small - particularly in the navbar - and my parallax effect doesn't work on mobile either.
I tried making changes to the scale within the viewport, but I honestly just don't know what I'm doing. I would be so grateful if someone could possibly take a look at the website on mobile (and desktop too, if you'd like) and maybe make some suggestions on a quick cheap fix for making it more readable while maintaining its look of 'prettiness'. And if you know how to keep the parallax intact on mobile that would be amazing too!
Here are the links to the website, and to the code on github:
https://ido-weddingsandevents.herokuapp.com/index.html
https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html
To make your navigation larger and your image titles on mobile you can try this CSS:
#media (max-width: 860px){
.navigation li a {
font-size: 80px;
}
.parallaxImage h2 {
font-size: 56px;
line-height: 94px;
}}
In Bootstrap you have to insert <div class="row">...</div> inside the class="container" . Better use a percentage in .navigation { width: 100%; max-width: 500px; } for mobile compatibility. Font-Awesome, PT Serif, and Delius Swash Caps are not used. Loading them is not good for performance.
If you are using #media, setup like this, for example
.navigation li a { font-size: 24px; }
#media (min-width: 768px) {
.navigation li a { font-size: 36px; }
}
#media (min-width: 992px) {
.navigation li a { font-size: 60px; }
}
#media (min-width: 1200px) {
.navigation li a { font-size: 72px; }
}
Important to use
<meta name="viewport" content="width=device-width, initial-scale=1">
I am trying to get text to be full width on a large device and then stacked on a mobile device with larger text.
I realize I can do something like displaying none for the large text if the browser is small and then setting three text blocks to col-12 for the small device, but that seems like a lot of html duplication. Is there a better way to solve this problem?
My code is below. I recognize I can override the font size with the bootstrap overrides for a small device. I just need help stacking the font.
I included a codepend here: http://codepen.io/anon/pen/pRQZdR
<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1>
#include media-breakpoint-up(sm) {
.title-text-md {
font-size: 20px;
}
}
Add this css this might do the trick.
#media (max-width: #screen-xs) {
h1{font-size: 30px;}
}
#media (max-width: #screen-sm) {
h1{font-size: 4px;}
}
#media (max-width: #screen-md) {
h1{font-size: 400px;}
}
#media (max-width: #screen-md) {
h1{font-size: 40px;}
}
h1{
font-size: 1.4em;
}
Hope this helps!
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)