I have a site I designed and coded that seems to cut off top and bottom on very specific devices that have short screens AND WILL NOT SCROLL. Any ideas on that I can do to keep the picture centered in the browser without any overlapping
Here's a link to jsfiddle:
https://jsfiddle.net/SCATORY/mjyssu7y/
<body>
<div id="container">
<div class="container">
<div class="nav">
<div class="logo"></div>
</div>
</div>
<div class="container holder">
<div class="center">
<div class="height">
<h1>Practice yoga. <br>In hypo-microbial style.</h1>
</div>
<div class="bag">
</div>
<div class="height-2">
<h2>Introducing ThePureBag™.<br>
The germ-resistant way to carry your yoga gear in style.</h2>
<div class="margin">
<button class="contact">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
<div id="grey">
</div>
</body>
Take the position:fixed off of the #container and take the position:absolute off of the .holder. This should make it work.
Position:fixed means that the element won't scroll.
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
I'm working on making front end design for someone but I don't have access to the css file or classes, so I can't see what's causing the container align left.
I'm looking to center the container on screen. What would be best approach? I tried wrapping div with text-align: center !important; that didn't work.
<div class="portlet-content">
<div class="portlet-content-container">
<div class="portlet-body">
<div>
<div class="container">
<div class="biography-view">
<div class="biography-item col-md-6">
<div style="border-style:none">
<div class="biographyimage" style="background-image:url(http://www.math.uni-frankfurt.de/~person/_4170854.jpg);"> </div>
<div class="caption biography-profile">
<div class="biography-profile-content">
<h3 class="full-name">Name</h3>
<p class="person-title">Company Name</p>
<p class="person-title"><strong>Person Title</strong></p>
<div class="person-biography">Biography</div>
<div class="person-biography collapse" id="readmore">More Person Info</div>
<a class="read_more" data-target="#readmore" data-toggle="collapse">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In a CSS block for the container, you can center it as follows:
margin-left: auto;
margin-right: auto;
Use inline styles <div class="portlet-content" style="text-align:center;"> or somthing yours based on css specificity mozila MDN
I am trying to affix menu nav bar on top fixed, but somehow the bar layout and "social icons" and "search box" I have get all messed up. I tried changing line 7 from relative to fixed position, but no luck.
Basically what I have now is the menu is on top, when you scroll down, the menu disappears for a while and then pops up again to stay affixed on top when scrolling down. No clue why the menu disappears for a sec when scrolling down to come back, but basically now I want the menu nav bar fixed on top permanently and not disappear for a sec when scrolling down. And ofcourse the current layout / width and all to stay in tact. Is it possible to achieve this somehow?
My BOOTPLY::: BOOTPLY
/* CSS used here will be applied after bootstrap.css */
.menu-container {
background-color:#000;
border-bottom:4px dashed #FFBB3A;
min-height:20px;
position:relative;
}
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<h1>MENU</h1>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
</div>
</div>
<div class="clearfix search_and_social">
<div class="clearfix navbar navbar-custom-search">
search box
</div>
<div class="clearfix navbar navbar-custom-social">
social icons
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
<div class="content"> CONTENT </div>
It looks like you're using the Bootstrap Affix Plugin and don't have it configured properly or it is doing something a little different from what you expected. The Affix plugin is setup to trigger a "sticky" header after scrolling some distance or to some element.
This will get you what is going on in this Bootstrap example.
Solution
Remove/disable Affix plugin.
Add .navbar-fixed-top to your #nav element. Then add padding-top to the body element that is equal to the height of your #nav element, which is currently 181px.
I have three divs like this:
<div class="container-fluid">
<div class="header">
Welcome
</div>
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Now, the first div class="container-fluid" is stretched on all browser window. The next class="header has padding/margin of some pixels from his parent element. Now I´d like this div to stretch all browser window out. But I also don´t want next class="menu" or class="content" to be stretched out.
How may I solve this?
Use .container for navbar and content & .row for .header like this: Demo
<div class="row">
<div class="header col-xs-12 col-sm-12 ">Welcome</div>
</div>
<div class="row">
<div class="container">
<div class="navbar">Menu</div>
<div class="content">Website content</div>
</div>
</div>
This sounds like a two-column layout with a full-width header. You tagged Twitter Bootstrap so I'll explain how to use those styles to do what you want.
<div class="row container-fluid">
<div class="header">
Welcome
</div>
<div class="span3 navbar">
Menu
</div>
<div class="span9 content">
Website content
</div>
</div>
The row class is on the element that wraps the columns. span# is the class that gives each column its size. So for a 12-unit width, you could assign span3 to the navbar and span9 to the content area.
Without Bootstrap, this is still relatively simple. You can do this in CSS.
.navbar {
display: inline-block;
width: 25%;
}
.content {
display: inline-block;
width: 75%;
}
<div class="container-fluid">
<div class="header">
Welcome
</div>
</div>
<div class="container">
<div class="navbar">
Menu
</div>
<div class="content">
Website content
</div>
</div>
Use container class outside menu and content. Hope this will help you.
jsFiddle Demo
I'm new to bootstrap and I wonder how can we give an element a full width of the screen? for example I have an <hr>element that I want it width to be take the full screen.
I notice that row is taking -15px margin-left and margin-right, how can we remove that margin without affecting other rows in the website?
Jsfiddle: http://jsfiddle.net/shadeed9/pwvg6o7n/ (See full screen for better view)
HTML:
<div class="row">
<div class="content">
<div class="container">
<h1>Welcome to my website!</h1>
</div>
<div class="container-fluid">
<hr>
</div>
</div>
</div>
Thanks!
You simply have to put it out of the container.
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>
<hr> <!----- here -->
<div class="container">
<div class="row">
<!-- STUFF -->
</div>
</div>