when I click on the menu icon(it is possible only when the screen size is less than 576px) visible at 575px, it changes its place, and title(FOOD, LLC) also. How can I fix it?
Web Page:
https://muhammad1918.github.io/New-Menu/MenuSite/
Try this to absolute is the one choice :)
#media screen and (max-width: 576px) {
h1 {font-size:10vw;}
#second{
position: absolute !important;
top: 40px;
left: 40px;
}
.navbar{
position: absolute !important;
right: 0;
top: 30px;
margin-bottom:50px;
}
#trois {
margin-right:20px;
}
#first {
position:relative !important;
}
}
then position:relative !important; to #first element.
Also add ml-auto class to menu button
<button id="trois" class="navbar-toggler collapsed ml-auto">
View Demo less than #576px window size to see the menu
This part:
Just remove the margin-top, and it will stay in the same line-height
#media screen and (max-width: 576px)
h1 {
font-size: 10vw;
margin-top: -10px;
}
If you want it to have the same padding on the sides (to not jump to the left) you have to add the padding manually since the default behaviour is to remove it. You need to add
padding-left: 15px; to the .navbar-expand-sm>.container at #media (max-width: 575.98px). Since the default is 15px anyways when it's larger than that.
Related
I have a page where a Submit button is supposed to be positioned on the right side of the bar as shown in the picture here:
However, I want the button to stay there even when the bar gets scrolled horizontally, which I have achieved via position: fixed;. This works until the screen size is adjusted to larger than the window, as seen here: https://media.giphy.com/media/SiErhserLwSYciEdS3/giphy.gif To fix that, I saw some recommendations for making position: absolute; which works for the screen size adjustments, but does not leave the button in a fixed position, as evidenced here: https://media.giphy.com/media/wHeXCgQ3fEIlPv2tr4/giphy.gif
My question is how I can achieve this expected result, where the button is fixed to the right side of the table toolbar, unaffected by horizontal scrolling, but is not affected by the window/screen size increasing/decreasing.
The code for this element looks as follows:
<div class="one">
<div class="two">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
.one {
width: 70%;
overflow: auto;
z-index: 10;
position: relative;
float: left;
height: 100%;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 4px;
}
.two {
height: 49px;
width: 100%;
border-bottom: 1px solid #dbdbdb;
}
.btn-danger {
position: absolute;
}
This behavior was achieved by changing the CSS to .btn-danger to:
.btn-danger {
position: sticky;
margin-top: 7px;
left: 10px;
}
It is acceptable that the button stay on the left in this case.
Why not use bootstrap responsive #media query to create breakpoints like so
#media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) #media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) #media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) #media (min-width: 1200px) { ... }
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I have a web page and menu made with element at the bottom of it (inside some DIVs):
.nav {
position: relative;
margin: 2px 0;}}
On smaller screens Id'd like to move menu to the top of the page.
I've added to CSS:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
and tried different settings for the position tag (top, absolute, ...) to no avail.
Please help.
try this:
#media screen and (max-width: 600px) {
.nav {
position:fixed;
top:0px;
left:0px;
min-height: 40px;
}
instead of:
#media screen and (max-width: 600px) {
.nav {
position:fixed, top:0px;
left:0px;
min-height: 40px;
}
You always end a css line with a ; and than you can enter the following line. You don't end a line with a , like you did after position:fixed;
and remove the second } in your first rule;
.nav {
position: relative;
margin: 2px 0;
} /*one } and not two*/
I also have a small tip. I don't know what browser you are using but user the webconsole (F12 for the most browser). If you made a mistake it will be visible there.
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.
I have added a new footer to my twitter boostrap website but when I resize the window gaps appear on the left and right.
I know that this is related to this css code...
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
If I change the padding to 0px then footer gaps go away but the whole page looses a margin.
I have tried this but it didn't work.
#media (max-width: 767px) {
footer {
padding-left: 0px;
padding-right: 0px;
}
Any ideas?
Try using negative margins, the same approach the nav uses. I didn't try this, but something like this should work:
#media (max-width: 767px) {
footer {
padding-left: -20px;
padding-right: -20px;
}
}