I'm trying to make the images in the slider to be full width or responsive.
The HTML is here on PasteBin
<div class="main-slider slider-pro" id="main-slider" data-slider-width="100%" data-slider-height="850px" data-slider-arrows="true" data-slider-buttons="true">
<div class="sp-slides">
<!-- Slide 1-->
<div class="sp-slide">
<img class="sp-image" data-large="assets/media/components/b-main-slider/bg-1.jpg" src="assets/media/components/b-main-slider/bg-2.jpg" alt="slider" />
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="main-slider__info sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">welcome to koka</div>
<div class="main-slider__title sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">
<div class="typed-strings">
<ul>
<li>welcome to <span class="main-slider__title-emphasis">WELCOME</span></li>
<li>PROFITABLE <span class="main-slider__title-emphasis">DIGITAL MARKETING</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Basically the images from the slider are shown only on the left side (70% of the slide). While in the right side of the slide, there is an empty space. (30%)
Related
I want to reduce jumbotron's height not with pixels but percentage of something (ex. div's height, windows height). What is the best way to do it appropriate with different window sizes and responsive design.
Here is my code:
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<!-- START PAGE CONTENT -->
<div class="content">
<div class="social-wrapper">
<div class="social " data-pages="social">
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
<div class="cover-photo">
<img alt="Cover photo" src="assets/img/social/cover.png" />
</div>
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="inner">
<div class="pull-bottom bottom-left m-b-40">
<h5 class="text-white no-margin">Team Members</h5>
<h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
</div>
<!-- END PAGE CONTENT -->
Thanks.
You can make the jumbotron maintain aspect ratio.
Check Sean Dempsey fiddle.
Just modify
<div class="box sixteen-nine">
<div class="content">
<span>16:9</span>
</div>
to your jumbotron
You can see Chris Coyer full explanation
How can I the div on the left and the image on the right at the same height using Bootstrap? They can stack when the screen width gets smaller, but at larger sizes they need to be equal.
<!-- main -->
<div id="main" class="row">
<div class="left col-md-6">
<h1>SCAQMD's Air Alerts lets you stay informed about air quality in your area.</h1>
<div id="round">
<img src="img/arrow.png" alt="arrow">
Sign Up
</div>
<div id="signup">
<h2>SIGN UP TODAY</h2>
<div><!-- line -->
</div>
<h3>to receive Air Alerts<br>Customized for you!</h3>
</div>
</div>
<div class="right col-md-6">
<img src="img/hero.jpg" class="pull-right img-responsive">
</div>
</div>
<!-- main -->
I'm converting my landing page from Bootstrap to Semantic-UI. The page has a position fixed top navbar. The main content is divided in two columns (3-cols and 9-cols). The left column is used to show a sidebar and the right column is used for current content.
I tried to copy and paste the demo page of Semantic-UI. The navbar is 45px high. I noticed that the first 45px of main content is overlapped.
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
My current workaround is to add a 45px high placeholder after navbar.
<div style="height:45px"></div>
I'm pretty sure there are some good css style names can fix the content overlapping.
The solution is much simpler. You just need to add a padding to your main container:
<div id="navbar" class="ui fixed inverted main menu">
<!-- header content here -->
</div>
<div id="content" class="ui container">
<!-- main content here -->
</div>
And add in your CSS:
.ui#content{
// padding should be the same as header height
padding-top: 55px;
}
You have to wrap your page content in grid class:
<link href="//semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="//semantic-ui.com/dist/semantic.min.js"></script>
<div id="navbar" class="ui fixed inverted main menu">
<div class="container">
<div class="title item">
<b>Dashboard</b>
</div>
</div>
</div>
<div class="ui grid">
<div class="row">
<div class="column">
<div id="maincontent" class="ui bottom attached segment pushable">
<div id="sidebar" class="ui visible left vertical sidebar menu">
<a class="item">First Item</a>
<a class="item">Second Item</a>
<a class="item">Third Item</a>
<a class="item">Fourth Item</a>
<a class="item">Fifth Item</a>
</div>
<div id="content" class="pusher">
<div class="ui basic segment">
<h3 class="ui header">Application Content</h3>
<p>First paragraph...</p>
<p>Second paragraph...</p>
<p>Third paragraph...</p>
</div>
</div>
</div>
</div>
</div>
</div>
What you could do is set a height on the content div and then set overflow:scroll. This way any long content will scroll in the div and it won't move up the page and under the nav bar.
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>
I'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>