i'm trying to get an good looking centered navbar. But my created navbar is a piece of crap.
Look at this, this is how it looks like at full resolution: https://cloudup.com/coWac-6mcbd
.. now lok at this: https://cloudup.com/c-jZHiJhlR1
This bug happened at a screen resolution of 1240px. What the heck is that?
.. and at a resolution of 1214, it breaks correctly to the toggled navigation.
I have used this code / media queries:
#media only screen and (min-width: 1227px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
}
}
#media only screen and (max-width: 1213px){
.navbar-nav{
float:none;
margin-left: -15px auto;
display: table;
}
}
#media only screen and (max-width: 1213px){
.navbar-nav > li {
margin-left: -15px;
}
}
So, what can id do? I'm clueless.
I'm not sure if this is the only problem. It might help to see your html, too. However, you've got:
margin-left: -15px auto;
The margin-left property takes only one value.
Related
I have created my portfolio for graphic design on the url sebastianpettersson.se. The theme I’m using is called Lekker by Code Interactive. I have searched their support forum but sadly not found any solution to this issue.
My issue is:
I would like to have my logo horizontally centered when my visitors is viewing my page on smartphone or tablet. I’m somewhat a semi novice when it comes to css but tried using this code for it but it sadly does not work.
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
text-align: center !important!;
}
}
(Note that I’m also using a code to hide a button on smartphone and tablet but I’m pretty sure it’s not interfering with it). Posting it to incase that is causing an issue.
#media only screen and ( max-width: 993px ) {
.qodef-m-lines{
display:none !important;
}
}
Any ideas or suggestions?
Set width100% and margin-right: auto; margin-left: auto;
#media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
You can center your logo by setting margin-left to auto, as it already uses margin-right: auto:
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
margin-left: auto;
}
}
First, I want to be clear that !important! doesn't work you should use !important with only one!
Second, you can use margin: 0 auto; to center images,
Third, use flexbox:
display: flex;
justify-content: center;
Tip, try using
#media only screen and (min-width: 450px) for small devices {}
#media only screen and (min-width: 800px) for bigger devices {}
#media only screen and (min-width:1100px) for even bigger devices {}
#Robo Robok 's solution is the way to go. You could also try learning more about positioning and layouts by experimenting with display: flex.
The following change to your header will also work, if you want to alter the position of your collapsible menu too:
#media only screen and (max-width: 993px) {
#qodef-page-mobile-header {
display: flex;
justify-content: center;
}
}
Also, you should have a look at your collapsible menu not appearing below 994px of resolution.
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
I'm looking for a way to add a line break if the screen width is smaller than X.
Half of the text should stay on the next line, instead of just one word, on smaller screen width.
Normal view on big screens:
Normal view on smaller screens:
Wanted result on smaller screens:
Thinner text is not related
I'm looking for a way to do it with CSS.
Use #media queries with span element and turn them to display: block; as they are inline by default...
Demo (Resize the fiddle window)
div {
font-size: 30px;
font-family: Arial;
}
#media screen and (max-width: 400px) {
div span:last-of-type {
display: block;
color: #f00;
}
}
#media screen and (max-width: 300px) {
div span:nth-of-type(2) {
display: block;
color: #00f;
}
}
Explanation: Here, I've simply wrapped each word with the span element which is inline by default.. So what I do is, I turn them to display: block; if the screen resolution is less than some px.
You can make these flexible by applying display: block; and display: inline-block; whichever suits your requirements.
If screen size is maximum of 400px
If screen size is maximum of 300px
Changing colors so that you can see the effect.
Add the br in your code, hide it using css initially and make it display: inline in media queries when the width meets your requirement
http://jsfiddle.net/LnECr/1/
br{ display: none; }
#media all and (max-width: 480px) {
.break2 { display: inline }
}
#media all and (max-width: 320px) {
br { display: inline }
}
Many different ways this can be done, I am using br because you asked for br
I wouldn't use a <br /> tag. Use CSS white-space:nowrap instead.
Like this:
<h1>Creative <span class="wrap">Web Design</span></h1>
#media screen and (max-width:480px) {
span.wrap {
white-space:nowrap;
}
}
I have set up a global element to align images to the right:
.containerright {
float: right; margin: 5px 5px 5px 10px; position:relative;
}
It works perfectly until the screen is minimized to mobile portrait size. Then the text wrap leaves a few words behind.
For example:
<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>
<h2>Here is an example of heading text!</h2>
When minimised 'Here is an example...' is aligned to the top-left of the image and the rest of the sentence '...of heading text!' falls under the image so there is a huge break where the image is sitting to its right.
How can I set the class so that when it's viewed '#media (max-width: 320px)' it stacks eg. display:block; ???
Thanks for the help!
Just remove the float in the media query CSS. :)
#media (max-width: 320px) {
.containerright {
float: right; /* remove the float on the mobile media query */
margin: 5px 5px 5px 10px;
position:relative;
}
}
jsFiddle example here.. resize the screen to see what it would look like on a mobile < 320px.
Alternatively, you could just override it in the media query..
#media (max-width: 320px) {
.containerright {
float:none;
}
}
#media (max-width: 320px) {
.containerright {
width: 100%;
}
}
Can someone take a look at my website and help me fix how a section looks while viewed on a mobile device. The "Thousands of Canadians" and "Mobile Search" sections on the homepage are not responsive like the rest of the page. Any help would be greatly appreciated.
Below is the CSS i have inserted so far:
#media all and (max-width: 640px){
#site > .wrapper, #footer > .wrapper {
margin: 0;
padding: 40px;
width: auto;
}
}
www.jobspark.ca
I don't think you are targeting the right part, if you look at the columns those are in, there are .myLeftColumn and .myRightColumn divs that have the original percentage widths. Try changing both of those to 100% width when the screen is smaller than 640px or whenever you need a breakpoint.
#media all and (max-width: 640px) {
.sqs-block-content .myLeftColumn,
.sqs-block-content .myRightColumn {
width: 100%;
}
}