I'm using materialize css where I have a logo jpeg whose padding is adjusted at the top for medium and up screens. For mobile screen I need to adjust left padding.
For medium and up I have this css style
#mylogo {
padding-top: 15px;
}
and html
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">
<img src="images/logo.jpeg" id="mylogo" alt="Logo">
My Logo
</a>
</div>
I use the same img tag for screens small and down. What do I have to add or change in my css to have padding-left instead of top in effect for small and down screens?
You can use media queries for that.
Considering that materializecss uses three different screen sizes (<=600px for tablets, <=992px for desktops and >992px for everything else) you have to provide the rule only for tablet devices.
In css you should write something like this:
#media (max-width: 600px) {
#mylogo{
padding-left: 15px;
}
}
#media (min-width: 601px) {
#mylogo{
padding-top: 15px;
padding-left:0;
}
}
Add media queries.
#media screen and (max-width: 480px) {
#mylogo {
padding-left: 10px;
}
}
#media screen and (min-width: 481px) {
#mylogo {
padding-left: 0;
padding-top: 15px;
}
}
On screens up to 480px (you can adjust this), padding left will be added to your image. If a device is at least 481px, your image's padding left will be reset to 0, while padding top will be assigned 15px.
As you can see, you can use different conditions—min-width and max-width being just two. If you want to see what else is available, check out this link: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
I know this is a simple fix, but I am clueless on how to actually fix the problem. It's weird. On the desktop version, my logo is smaller than I want it to be because on the mobile it gets way too big.
Here is my css code:
#logo{
height:380%;
margin-top: -35px;
}
And here is my meta tag for other devices:
<meta name="viewport" content="width=device-width, initial-scale=1">
I also researched a bit and saw that I need an #media? Also here is the picture:
Here is my full css code as requested:
.navbar-text pull-left{
color:#000000;
text-decoration:none;
}
.navbar-text p{
color:inherit;
text-decoration:none;
}
.navbar{
border: 0px;
}
#logo{
height:500%;
margin-top: -35px;
}
#media only screen and (min-width: 640px) {
#logo {
height:150%; // Change this value
margin-top: -35px;
}
}
You can implement the equivalent of max-font-size with media queries
The idea is relatively simple.
You set the font size to 20vw - read about vw here - since it's
a logo.
you overwrite the font-size with a fixed size once the viewer size
exceeds a certain point - 450px in my example below.
The end result is that your font will adjust to the screen size and will be responsive.
Working example:
#logo {
font-size: 20vw;
text-align: center;
}
#media screen and (min-width: 450px) {
#logo {
font-size: 83px;
}
}
<div id="logo">"Quotin"</div>
Edit:
I just realized your logo is an image.
I trimmed the extra empty space off your logo in Photoshop because that's a lot easier than messing with negative margins in this case.
This should work on both mobile and desktop screens and be responsive without needing media queries
Working Example:
#logo {
margin: 0 auto;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
<a class="navbar-brand" href="http://www.quotin.co"><img class="img-responsive" id="logo" src="https://image.ibb.co/dTt4xv/8DL1n.png"></a>
I would replace 380% by a size in either pixel or rem.
Mobile screens have nowadays very high pixel density. Here is a good example on how to make a responsive logo https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/
CSS3 Media Query is what you should be looking for. Assuming that your desired mobile width is 640px, put the following in your CSS to display it differently on mobile view.
#media (min-width: 640px) {
#logo {
height:150%; // Change this value to adjust logo size
margin-top: -35px; // Change this value to vertically move your logo.
}
}
Your code is all good. Just change min-width to max-width, and you're all set.
#media only screen and (max-width: 640px) {
#logo { height: 150%; };
}
Right now, what you are saying is:
#logo { height: 500%; } - Give the logo a height of 500%.
#media ..(min-width: 640px) {#logo {height: 150%;} } - If the screen size is at minimum 640px wide (or wider...), let the height be 150%.
I'm surprised nobody noticed this before.
I am working on taking my desktop site and scaling it down for mobile. The site is incredibly static, so the process shouldn't take long. I'm not used to scaling down to mobile though, so I am in a bit of a learning curve and was seeking some help. I have my menu in place where the mobile menu displays and the desktop menu hides when the screen is sized down:
#media (min-width: 220px) and (max-width: 568px) {
#menu ul, #logo, #header{
display: none;
}
vice-versa goes for when the desktop is in place and it hides the mobile nav:
#media (min-width: 569px) {
.navbar{
display: none;
}
}
However, when I am tweaking my CSS to alter my mobile view, my first run-in is with simply just displaying my content (in this case my 'about' content) to fit the screen. My fluidity in desktop isn't ideal, but it works as needed on all displays from tablets and beyond. I bare-boned the About page to just have my text and a horizontal break being displayed in order to troubleshoot the issue, but the text still follows the rules set by the CSS for the desktop version. Here is the #media rule to size for mobile:
#media (min-width: 220px) and (max-width: 568px) {
#menu ul, #logo, #header{
display: none;
}
.about_text{
width: 100%;
}
.about_text h2{
font-size: 3em;
padding-bottom: 1%;
}
.breaker-about{
clear: both;
border-bottom: 3px solid #cccccc;
margin: 5px 0px 12px 0px;
width: 90%;
}
}
#media (min-width: 569px) {
.navbar{
display: none;
}
}
Do I need to encompass the entire CSS in the #media (min-width: 569px) media query from here on out? Or does that act as a single standalone 'if/then' rule?
Here's my fiddle. Using bootstrap for top nav, so that's why the resize down to size doesn't stylize on fiddle.
https://jsfiddle.net/qu4851wq/1/
You don't need the (min-width: 220px) for mobile, just the (max-width: 568) is enough. If you're using Bootstrap, you can just put your entire contents into a grid and it will automatically scale for mobile.
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- All your content after the nav -->
</div>
</div>
</div>
You don't have to place the entirety of your CSS in a min-width for the non-mobile portion of the site.
Or you can just use bootstrap default navigation and style it like you want.
bootstrap nav
Hi I'm fairly new to bootstrap and what I'm trying to achieve is to have a jumbotron on top of my page with different paragraph formatting to accommodate for a background image which takes lets say 30% of full width space.
I have offset my text by padding-left: 300px; and it looks fine on desktops but this rule also applies to a paragraph in mobile device mode resulting it being very skinny and tall.
Is there a way where I can set lets say 3 different paragraphs each showing under certain screen size?
Just use media queries:
#media screen and (max-width: 320px)
{
p{
padding-left: 0;
}
}
#media screen and (min-width: 321px) and (max-width:800px)
{
p{
padding-left: 100px;
}
}
#media screen and (min-width: 801px)
{
p{
padding-left: 300px;
}
}