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
Related
I'm trying to add a banner ad to run along the left side of my blog post.
However my attempts so far have resulted in it appearing above the content pushing the blog post content down the page.
Live link: https://www.moneynest.co.uk/pension-crisis-uk/
Added into head:
<div id=”LeftFloatAds”><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></div>
Added into CSS
#media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{
left: 0px;
position: fixed;
text-align: center;
top: 200px;
}
}
FYI I followed this guide.
First of all, replace the position of ... move it inside your main content wrapper.
Then apply this css,
As you want to show this only on wider screen then use this,
#media only screen and (min-width: 1400px) {
#LeftFloatAds {
position: fixed;
display: block;
overflow: hidden;
left: 0;
top: 200px;
}
}
This will hide the banner on the screen smaller than 1400 pixels.
#media only screen and (max-width: 1399px) {
#LeftFloatAds {
display: none;
}
}
First, be careful with the div id quotes.
<div id=”LeftFloatAds”> should be <div id="LeftFloatAds">
Then, with that media query you are giving those properties to the element only when the screen is at least 1400px but less than 500px, which is impossible. Try it like this:
#media only screen and (min-width: 500px) and (max-width:1400px)
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'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
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;
}
}
This question already has answers here:
What is the best way to move an element that's on the top to the bottom in Responsive design
(4 answers)
Closed 9 years ago.
I'm wondering if there is a way to change the order of HTML content depending on screen size.
This is the main website header, it shows correctly on every media query.
<h1>title</h1>
<nav>inline list items</nav>
<h2>subtitle</h2>
Basicly it looks like this:
H1 TEXT
H2 TEXT-----------------LIST ITEMS
(or check out http://www.jeroenduijker.nl/test/ and resize the screen)
As soon as the media query steps in (#media only screen and (max-width: 480px) {})
, the h2 gets squished, and i'd prefer to put the nav bar above the h1.
Is there an easy way to make the html go:
-----------------LIST ITEMS
H1 TEXT
H2 TEXT
Hopefully i've explained it well enough, i hope you can help me out, i'd appreciate it!
You could write two nav bars and have one hidden and the other visible, and then just switch that based on the media query.
HTML:
<nav class="show-mobile">
...
</nav>
<h1>title</h1>
<nav class="hide-mobile">
...
</nav>
<h2>subtitle</h2>
CSS:
#media only screen and (max-device-width: 480px) {
.show-mobile {
display: block;
}
.hide-mobile {
display: none;
}
}
#media only screen and (min-device-width: 481px) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
Or two H1 elements, one before the nav and one after and have them switch visibility based on the media query.
<h1 class="hide-mobile"></h1>
<nav>
...
...
</nav>
<h1 class="show-mobile">Title</h1>
<h2>subtitle</h2>
Or you could tell the nav to have absolute positioning at the top when the mobile media query is active.
#media only screen and (max-device-width: 480px) {
nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 44px
}
}