Why my layout / css is screwed?
You have a (small) stack of machine detectable errors. It isn't worth doing any further investigation until they are fixed.
Why my layout is screwed ? (2)
.logoteam has a width of 20%.
the 20% is derived from the width of .bloc-level, its parent element.
- puls page has a width of 695 px. 20% of 695 = 139px
- jango has a width of 421 px. 20% of = 81px
So to work around this you can
- a) set a width of 695px on
.float1so 20% of 695px is always 139px - b) set a width on
span.logoteamto be 139px
html layout messed up when i zoom in or out
The reason that it's broken the layout like that is because you're using percentages so that means when you're changing the zoom level the widths are being altered to fit the new size of the page which is what is meant to happen.
Changing your CSS to be fixed to a certain degree will help remedy this issue but won't fully fix everything because of how it's currently working. I'd suggest as a good starting point that you change the container max-width to something suitable for the design to begin with.
#container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
However, you can then use media queries to change the width of the container depending on the screen size which will respond to the page size appropriately. For example, when the screen size becomes smaller to a tablet or mobile, you could do this (as an example).
@media screen and (max-width: 1024px) {
#container {
max-width: 960px;
}
}
Why does adding content inside of a layout screw up the layout?
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
Plone site doesn't load base.css anymore, and layout is screwed
http://www.isf-firenze.org/base.css
return an empty file. I think you've a problem with portal_css. Try to switch on/off the development mode, or check if there's an empty base.css in portal_skins/custom.
Complete list of reasons why a css file might not be working
Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.
(If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?
Bootstrap 4 repsonsive layout messed up
The solution does NOT require any float. On the contrary, a Bootstrap-friendly solution requires less custom css, not more.
So, I have commented out many of your custom css rules because they are either unnecessary or contribute to breaking Bootstrap. See my comments in the code snippet below in regards to some of the replacements I made there.
The solution to the main problem was to replace height: 135px; with min-height: 135px; for the #mu-header.
The solution for the icons problem was to move <i class="fa fa-phone fa-2x"></i> inside the paragraph element.
Now, since I completely removed or replaced some of your custom css classes (I commented them out in the code snippet below), you can also remove those classes from the HTML code.
As a bonus, I have also made the columns more responsive using the col-8 col-md-3 col-lg-6 classes for the logo and col-md-3 col-lg-2 classes for the other items.
Here's the working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style> #mu-carousel .carousel-item { max-height: 480px; width: 100%; }
.mu-nav-collapse .navbar-nav{ float:none; margin:0 auto; display: block; width: 100%; }
.mpush { margin-top: -8px; }
.navbar-nav >li{ text-align: left; background: white; display: inline-block; }
.navbar-nav .dropdown .dropdown-menu { border: none; background-color: white; }
.sticky-top { position: relative; }
.navbar-toggler { background: darkgrey; }
@media (min-width: 768px) { .mpush { margin-top: -28px; } #mu-carousel { margin-top: -28px; } .mu-nav { margin-top: -28px; background: white; } .navbar-nav { float:none; margin:0 auto; display: block; text-align: center; } .navbar-nav >li { background: white; }
.navbar-nav .dropdown .dropdown-menu { background-color: white; }
.mu-nav-bg { background: white; }
.sticky-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } }
#mu-header { background: lightgrey;/* height: 135px; replaced with min-height: 135px; */ min-height: 135px; }
/* .mu-header-logo { height: 85px; width: auto; }*/
.mu-header-area {/* margin-top: 35px; replaced with responsive classes: `mt-0 mt-md-4` *//* height: 85px;*//* width: auto;*//* line-height: 0.1;*/ }
/* .mu-header-area i{ float:left; padding-right: 15px; }*/
.icon-tex-title{ padding-top: 6px; font-size: 14px; font-weight: 900; }
/* .icon-tex-subtitle{ font-size: 11px; replaced with the `small` class }*/</style>
<header id="mu-header" style=""> <div class="container"> <div class="row"> <div class="col-8 col-md-3 col-lg-6"> <span class="mu-header-logo"> <img src="http://www.cablecorporation.co.za/wp-content/uploads/2017/09/dummy-logo.png" alt="Sample Image"> </span> </div>
<div class="col-4 d-flex d-md-none justify-content-end navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right2 mu-nav-collapse" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div>
<div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3"> <div class="mu-header-area"> <p class="icon-tex-title mb-1"> <i class="fa fa-phone fa-2x"></i> 1234-123456</p> <p class="small">Lorem ipsum dolor sit sit sit sit sit sit sit sit</p> </div> </div> <div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3"> <div class="mu-header-area"> <p class="icon-tex-title mb-1"> <i class="fa fa-phone fa-2x"></i> 1234-123456</p> <p class="small">Lorem ipsum dolor sit</p> </div> </div> <div class="col-md-3 col-lg-2 mt-0 mt-md-4 pl-md-5 pr-md-0 pl-lg-3"> <div class="mu-header-area t"> <p class="icon-tex-title mb-1"> <i class="fa fa-phone fa-2x"></i> 1234-123456</p> <p class="small">Lorem ipsum dolor sit</p> </div> </div> </div> </div></header>
<div class="container sticky-top mpush mu-nav"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> </div> </div></div>
<section id="mu-carousel" class="mpush"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://static.pexels.com/photos/93140/pexels-photo-93140.jpeg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div></section>Browser resize messes up the layout
If I read your problem correctly, I believe that Stop the browser from pushing everything around when I resize might solve your problem. I have had this problem a while back and I may have used this or I used
Position: Fixed;
But again this was a while back so I'm not sure.
Related Topics
Anyone Know What The Purpose of Tagging a Class with *[Class]
Redmine 3.3.0 (Ruby on Rails 4.2.6) Stylesheets Not Generated/Included in Application.CSS
How to Map CSS and Js File from Jsp File in Spring Mvc
If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes
Postcss - Color Function Plugin - "Unable to Parse Color from String"
Generating Vendor Prefixes in Less
How to Display Block Div on Hover a Tag
Why Is Blue Circle Not Spinning in The Center of Itself
How to Select The 1St and Then Every 4Th Row in a HTML-Table with Nth-Child()-Selector
Asp.Net MVC Navbar-Brand to Header Text Color
Only First Media Query Working
How to Position Button Sprites CSS
How to Achieve This Visual Using CSS
Why Use Ems for Padding & Margins with Browsers Now Scaling Correctly
How to Make a Wordpress Theme Full Width
Color Change of Navigation Buttons When Scrolling Up and When Scrolling Down