Is there a way to have the brand text on the left when on a large screen, then centre when on a small screen? I'm using this atm to centre it but it uses the width so the whole bar is a link.
Name of App
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}
Check this css and make use of media queries to have different css applied at different screen sizes
#media(max-width: 767px) {
.navbar-brand {
position: absolute;
width: 30%;
left: 0;
top: 0;
text-align: left;
margin: auto;
}
}
#media(min-width: 768px) {
.navbar-brand {
position: absolute;
width: 30%;
left: 0;
top: 0;
text-align: center;
margin: auto;
color: orange;
}
.nav.navbar-nav {
margin-left: 30%;
}
}
JSFIDDLE
Thankyou :) was literally about to comment saying i'd sorted it with this
#media (max-width: 768px) {
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-toggle {
z-index: 3;
}
}
Related
I would like the text to spread all over the webpage top to bottom, left to right.
I did it using vw, vh sizes for text size, placed inside a div.
within the text, there are links (.href) of which size is slightly larger.
It currently works with mac 13inch 2015 but for some reason doesn't with 13 inch of 2017.
It also doesn't work on ipad 11 inch portrait.
I am new to media queries and might be doing it all wrong.
Looking forward to your responses! Many thanks.
body {
margin: 0;
height: 100%;
width: 100%;
}
#media only screen
and (min-width: 200px){
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 2.5vh;
}
.href {
color: #0000ff;
font-size: 3vh;
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 3vh;
}
.href {
font-size: 3.5vh;
}
}
#media screen and (min-width: 1025px) {
.div {
width: 97vw;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
margin-bottom: 1rem;
font-size: 2.5vw;
}
.href {
font-size: 3vw;
}
}```
Is there something wrong with my styles or media query? When im in my phone i lose the ability to scroll down. here is my only media query
#media (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
}
Try this
#media screen and (max-width: 568px) {
header {
padding: 1em 0;
position: fixed;
.logo {
width: 200px;
}
.main-nav {
display: none;
}
#burger-icon {
width: 27px;
display: block;
}
}
#section1 {
height: 500px;
text-align: center;
}
#section2 {
.col-1 {
width: 100%;
text-align: center;
}
.col-2 {
width: 100%;
padding: 0;
margin-left: 0;
margin-top: 20px;
display: block;
}
}
I fixed it, it was the skrollr declaration on my script it was my own mistake thankyou for all the help i think the skrollr.js has issue with mobile.
<meta name="viewport" content="width=min-width, initial-scale=1.0">
#media (max-width: 455px) and (orientation: portrait) {
#border-search {
display: none;
}
#n-recentchanges {
visibility: hidden;
}
#n-randompage {
display: none;
}
/*sidebar appearance*/
#column-one {
background: none repeat scroll 0 0 #5B5B5B;
float: left;
text-align: center;
margin: 0 0 0 1%;
min-height: 149px;
padding: 10px 20px;
position: absolute;
font-size: 90%;
top: 5px;
height: 1px;
left: 6%;
width: 15%;
}
#n-home {
position: relative;
top: 0px;
left: -8px;
}
#n-sign-up {
position: relative;
top: 5px;
left: 0px;
}
#n-help {
position: relative;
top: 13px;
left: -4px;
}
#n-add-pix {
position: relative;
top: 19px;
left: 0px;
}
#column-content {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
margin: 0 1%;
padding: 10px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
#button .hidetext {
background: none repeat scroll 0 0 #5B5B5B;
display: block;
color: #99D9EA;
margin: 0 1%;
position: relative;
float: right;
border: 0px;
top: 95px;
left: 53%;
}
#ca-edit {
position: relative
}
/*edit page nav*/
.top_header {
background: none repeat scroll 0 0 #5B5B5B;
display: none;
float: right;
margin: 0 1% 40px;
padding: 30px 10px;
width: 60%;
height: 60px;
position: relative;
top: -370px;
left: -10%;
}
#p-cactions {
float: left;
display: none;
}
#p-cactions li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 35px 0 0;
text-align: left;
position: relative;
left: 10%;
}
#p-personal {
float: left;
display: none;
}
.top_header ul {
margin: 0;
padding: 0;
}
#p-cactions {
float: left;
}
#p-personal li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 15px 0 0;
}
#column-content #bodyContent {
color: #7b377b;
float: left;
font-size: 115%;
margin: 15px 0 15px 50px;
width: 94%;
}
#column-one h3 {
display: none;
}
#column-one ul {
margin: 0;
}
.mw-ui-vform-field {
width: 70%;
}
/*control font size*/
#column-one li {
font-size: 18px;
list-style: outside none none;
margin: 1px 0;
text-align: center;
}
/*control special page layout*/
.mw-ui-input {
width:80%;
}
#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}
/*control search input text color and font*/
#searchInput {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 4px solid #000000;
box-shadow: none;
position: relative;
top: -60px;
text-align: center;
left: 400%;
float: right;
color: #99D9EA;
padding: 8px;
width: 92px;
z-index: 3;
}
.rectangle-box {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: block;
margin: 0 1% 40px;
position: relative;
width: 60%;
height: 130px;
left: 0%;
top: 35px;
}
.rectangle-box2 {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: none;
margin: 0 1% 0 40px;
height: 400px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
}
The media query I'm using only seems to be recognized by Chrome and Opera. I'm trying to get my site to resize with this media query, but when I change the browser window to that size the query doesn't take effect. What can I do to fix this? Is there a problem with my code? What could cause this to happen only in certain browsers?
Change viewport
<meta name="viewport" content="width=device-width">
As far as I have worked with media queries, I never used an and. And I'm sure the problem is caused by it. Remove it, and make it like this:
#media (min-width: 368px) {...}
The and will not come between #media and (min-width: 368px), but it will come between the two ()s ie:
#media (min-width: 368px) and (orientation: landscape) {...}
Edit:
I'm currently on mobile so sorry I can't test code. But I think the correct query is max-width, not min-width. So just replace min-width with max-width.
Mustaghees is correct. Remove that first "and".
Here's how it would look if you had an arbitrary background-color change when the browser size reaches min-width:368px:
http://codepen.io/sabaeus/pen/ZGOpPB?editors=110
The issue was fixed by changing the order of the media queries. They were blued out before in my coding panel. this went away by cutting and pasting the queries in a different order. Now the queries work in all browsers.
I'm trying to build modal window that will be positioned absolute, 30 pixels from edge of screen.
I've build this css:
.modal {
overflow: hidden;
}
.modal-dialog {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
margin: 0;
}
#media (min-width: 768px) {
.modal-dialog {
width: auto;
margin: 0;
}
}
.modal-footer {
position: absolute;
bottom: 0;
left:0;
right:0;
}
.modal-header, .modal-body, .modal-footer {
padding: 10px;
}
.modal-content {
height: 100%;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop {
background-color: #fff;
}
.modal-header .close {
margin-top: 3px;
}
.btn {
border-radius: 0;
}
and my results so far looks like this: http://jsfiddle.net/Misiu/LT3YM/
My modal window is correctly positioned, but modal-body isn't sizing, i would like it to take rest of available height of modal - from header to footer.
I can position absolute modal-body and add top and bottom properties, but I'm wondering if there is a better way of doing this.
My solution for now is this code:
.modal-body {
position: absolute;
top: 46px;
bottom: 54px;
overflow-y: scroll;
}
and demo of what I have:
How can I modify my code better so that modal-body will always be correct height? Is positioning it absolutely only option?
http://jsfiddle.net/LT3YM/4/
You should change the values in .modal-dialog. You can make bottom and right 30px too
.modal-dialog {
position: absolute;
top: 30px;
bottom: 50px;
left: 30px;
right: 50px;
margin: 0;
}
Alternatively, this uses 3%: http://jsfiddle.net/LT3YM/7/
.modal-dialog {
position: absolute;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
margin: 0;
}
Looks like this:
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.