could you please tell me how to make logo at center in using css.Actually I am using media query for mobile view .In desktop my html is working fine , but in mobile view
I want to show logo on center and have two menu option side by side (see below image).
here is my code
#media screen and (max-width: 480px) and (min-width:320px) {
.header{
background: #00B7FF;
flex-direction: column;
}
}
https://stackblitz.com/edit/js-wcvzbw?file=style.css
Assuming you want to center it vertically, adding margin: auto; should do the trick in a flex column layout.
You could make the container width to 100%.
#media screen and (max-width: 480px) {
.container {
width: 100%;
}
}
And then align the header to center.
#media screen and (max-width: 480px) {
.header{
text-align: center;
}
}
You can see the example here.
Related
This question already exists:
HTML desktop and mobile [closed]
Closed 3 years ago.
https://jsfiddle.net/5d401nso/1/
#mobileview{
/*background-image:url("");
background-size:100% 100%;*/
width:auto;
height:auto;
}
#media(max-width: 768px){
#mobileview{
width:411px;
height:411px;
}
}
#media(max-width: 500px){
#mobileview{
width:411px;
height:411px;
}
}
Above is the jsfiddle that i have created.
Current Problem: Not Supporting Mobile View and looking a ways to
change the text and button alignment from center to "left" when in
mobile view
Solution That i wanted: When in mobile view ( max width 768px or 500px ), the text and button will align to left side instead of center.
Put p { text-align: left } inside your #media {} at whatever breakpoint you want it to happen. However small tipp. To make it even more responsive give your image a max-width instead of a static width, so your image will resize whenever your screen does. Also note you have the exact settings for 500 and 700px. If you say #media(max-width: 700px) it will apply to every thing wich is smaller than 700px. You don't need to define 500px if your want 500px down. If you want something to happen within 500px and 700px us (min-width: 500px) and (max-width: 700px)
#media(max-width: 500px){
#mobileview{
max-width: 100%;
height: auto;
}
p {
text-align: left;
}
}
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
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)
I understand there's a gazillion questions on this issue but none of the solutions on any of them seem to work for me. This is what my markup looks like:
<div class="immersion-div">
<div class="immersion-div-image"></div>
</div>
As you see, it's a fairly straightforward setup with one div containing another. The parent div is styled to adapt its height to the device screen resolution using media queries. Here's how the two divs are styled:
Parent div:
#media (min-width: 2000px) { .immersion-div { height: 1307px; } }
#media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
#media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
#media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
#media (max-width: 299px) { .immersion-div { height: 136px; } }
Child div (with the image background):
.immersion-div-image {
background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
The image serving as the background is 2880px by 900px (although that should be inconsequential in this scenario) and the resolution of the screen on which I tested this is 1366px wide. Per the defined media queries, the height of parent div should evaluate to 500px since the screen falls in the 750px-1400px category. However, on Internet Explorer, the div seems to render with a height of 1000px! This issue is only affecting IE whereas all other browsers are rendering the divs fine. What could be the problem? Before anyone suggests using background-size: contain, I must admit I tried it and it messes up the aspect ratio leaving a blank band at the bottom of the div which is why I don't want to go that route. Besides, I want to understand why cover wouldn't work on IE when it does just fine on all other browsers.
Just in case it helps, the site in question is peppyburro.com and the affected divs are on the last green image on the home page.
How to center 3 images in a row at 480px screen width, and 2 images at 320px?
Here is JSFiddle Demo
<ul>
<li><img/></li>
...
</ul>
#media (max-width: 480px) {}
#media (max-width: 320px) {}
Put a display: inline-block; on your <li> and text-align: center; on your <ul>. This way your images will allways be center aligned. In your media queries you can set the width of your <ul> (display: block;) so you'll have the correct amount of images lined next to each other.
example:
http://jsfiddle.net/skeurentjes/qfrRG/2/
Something like this does the job:
http://jsfiddle.net/isherwood/qfrRG/4/
#media (max-width: 480px) {
/* would like 3 centered images in a row */
img {width: 30%; margin-left: 2%;}
}
#media (max-width: 320px) {
/* would like 2 centered images in a row */
img {width: 45%; margin-left: 5%}
}
Adjust widths and margins to suit.
Is this something like what you were looking for?
Just beware it uses some attributes that aren't available in old browsers. Specifically nth-child();