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;
}
}
Related
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.
I would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/
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 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.