Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm an amateur developer both in Bootstrap and Media Queries.
I am trying to making the navigation bar of a Bootstrapped site responsive with slight customization. I am running into issues when I resize the browser.
At normal dimensions, The site looks something like this:
However, there is a breakpoint at 1130 px ( Very Odd number? Why!) and the navigation bar looks like this:
As you see, the width of the navigation bar doubles and the user icon is displaced to the next line.
When we reduce the size further, the navigation bar remains like this till 1005px:
The next breakpoint is at 1004px, when the search box comes to the extreme left:
This remains like this till 960px:
At 959px, The design changes CSS again:
At 881px, The design keeps the same CSS:
CSS again changes at 880px:
Until finally coming to the last breakpoint at 767px, after which the site remains same:
I dont understand why at 1130px, 1004px, 959px and 880px there is such an awkward displacement of items.
What should I do:
that at 1130px, the user icon does not spill to the next line?
From 960px to 1004px, the search bar and the user icon are not displaced to the next line.
at 880px, The user icon does not displace to the next line.
I want that at all times, the search bar and the user icon should be inline with the Logo. How should I attain that?
I'll be glad if someone can take the pain and tell why the breaking is happening at such odd numbers.
This is the following media query that was written in styles.css:
#media (min-width: 320px) {
.navbar-brand {
margin-left: 0px;
}
}
#media (min-width: 640px) {
.navbar-brand {
margin-left: 0px;
}
}
#media(min-width:960px) {
.navbar-brand {
margin-left: 250px;
}
}
The Site is up here and the HTML/CSS/Bootstrap files are here.
Change your media queries to this and it is going to work
#media (min-width: 320px) {
.navbar-brand {
margin-left: 0px;
}
}
#media (min-width: 640px) and (max-width: 880px){
.navbar-brand {
margin-left: 5px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 10px;
}
.navbar-nav>li>a {
padding: 30px 5px !important;
}
.navbar-nav{
margin-left:5px;
}
}
#media(min-width:960px) {
.navbar-brand {
margin-left: 120px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 30px;
}
.navbar-default .navbar-nav>li>a {
padding: 30px 15px !important;
}
}
Related
Why is the last media query not working here? Am I over looking something? I have tried changing the order but it always leaves out the last one for some reason. This appears to be the correct cascading order to me.
#media screen and (min-width: 768px) {
.mobileBrand {
display: none;
}
}
#media screen and (max-width: 767px) {
.desktopBrand {
display: none;
}
}
#media screen and (max-width: 1079px) {
.nav-right {
margin-left: 1em;
}
}
#media screen and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
The scenario above doesn't clearly tell the browser what margin-left to apply if screen is less than 1079px - it could be either 6em or 1em.
You should define min and max values for the 1106px query.
#media screen and (min-width: 1080px) and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
the fourth one will overwrite the third one, since also the fourth one defines everything less than 1106px. So the third will never apply.
Use min-width AND max-width on the fourth one to avoid that.
ADDITION/EDIT: or just reverse the order of the third and fourth one...
If you look at your media query:
#media screen and (max-width: 1079px) {
.nav-right {
margin-left: 1em;
}
}
#media screen and (max-width: 1106px) {
.nav-right {
margin-left: 6em;
}
}
You have two queries that conflict with one another.
One is from 0px to 1079px and the other 0px to 1106px.
They overlap for 1079px altogether.
I would define the queries a little more explicit.
Stating something along the lines of
#media screen and (min-width:1080px) and (max-width:1106px)
That way, anything above your defined 1079px will show a margin-left of 6em instead.
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I am having some trouble with CSS, when i try the site on a mobile device the line height remains at 65px , this can be fixed by putting a !important in front but this is not the kind of fix i want, should i be using a class or something?
Thank you very much
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#IEGlyphPlacement
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}
You're targeting a different element inside of the media query. The media query is targeting the element with an ID of IEGlyphPlacement, rather than Glyph (which you define in the non-media query code).
Update as follows:
/*Change the glyph size when necessary*/
#media only screen and (max-width:990px)
{
#Glyph
{
line-height: 80px;
}
}
#Glyph
{
line-height: 65px;
}
I am not a web designer & I do not understand the CSS code very well.
what to edit in the famous mx-fluity blogger template to produce (multi-level) menu on both PC browser and mobile browser with the same style.
thanks in advance.
If I understand correctly, you don't want the menu to switch to a "mobile menu" (drop-down). Or do you want the navigation to be a full-width dropdown all the time?
If you want the navigation to remain as it is on the desktop as long as possible you need to look at the media queries.
Somewhere you'll find:
#media only screen and (max-width: 767px)
Look for the selectors called: #navinti and #mobilenav
You need to prevent #navinti from being hidden, and the same time disable #mobilenav
They currently look somewhat like:
#navinti {
float: none;
...
}
#mobilenav {
display: block;
...
}
Set it to:
#navinti {
float: left;
...
...
}
#mobilenav {
display: none; /* You might have to add an !important to this */
...
}
At #navinti erase:
background-color
-moz-box-shadow
-webkit-box-shadow
box-shadow
If your navigation isn't wider than the one on the template, you should get away with this down to 500px (width), from there you can hassle your way to say 460px width padding & margin... Unless your navigation has only 2 or 3 points there's not much of a chance you will get it squeezed onto a mobile screen.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hi I have page where I am placing image on left side of page and description on right side of page. I have terms content which I am placing below image and description contents. Now when i minimize, I can see only part of the description contents which fits screen. But how i want is when i minimize, description should drop below images and terms should drop below description.
This is my class for image which I am placing on left side of body :
.appPreview {
max-width: 300px;
height: 300px;
border: 1px solid #cecece;
margin-left : 55px;
}
span.grey {
color: #cecece;
}
This is my class for placing description on right side of body :
.right_content
{
float: left;
border: 1px solid #CCC;
width: 400px;
margin-top : -520px;
padding-bottom : 150px;
}
This is my class for placing terms below Image and description :
div.MoreInfoterms {
width : 850px;
margin-right : 250px;
margin-left : 55px;
margin-top : 20px;
border: 1px solid #cecece;
background-color: #f7f9f9;
max-height:700px;
margin-bottom : 20px;
}
I really don't know how to achieve this So any help would be highly appreciated.
Try this:
#media screen and (max-width: 1024px) {
.appPreview {
display: block;
}
.right_content {
float: none;
}
div.MoreInfoterms {
width: 100%;
}
}
You should use percentage instead of px.
You can set up as many as you want by simply creating min/max size boundaries.
<link rel="stylesheet" href="/path/to/small.css" type="text/css" media="only screen and (max-width:800px)">
<link rel="stylesheet" href="/path/to/medium.css" type="text/css" media="only screen and (min-width:801px) and (max-width:1000px)">
<link rel="stylesheet" href="/path/to/large.css" type="text/css" media="only screen and (min-width:1001px)">
If you want a responsive webpage, you need to use media queries, you can see some standard ones here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
they basically change when the css put in it is applied.
It's advisable to start with your mobile styles first, then add your additional styles for larger devices as media queries using min-width. I find this approach makes things much easier to plan and maintain. Look at this article for an in-depth tutorial.