I am using Materialize CSS and I'm trying to center a div. I'm trying to get the white boxes to center on mobile and desktop to the center of the page. All the white boxes are in the same div called root.
index.html
<body>
<div class="container">
<div id="mainContent" class="row">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
</body>
styles.css
#mainContent {
background-color: blue;
margin: auto;
display: block;
}
#root {
margin: 0 auto;
position: relative;
}
On mobile, it centers the white boxes correctly.
On desktop the boxes are on the left side.
If I add margin-left to .root{} then it's not centered on the mobile version.
I think the best way is to use grid offsets on the columns:
<body>
<div class="container">
<div id="mainContent" class="row">
<div class="col s12 l6 offset-l3"></div>
</div>
</div>
</body>
Adding the class offset-l3 will add an offset of 3 columns on the left for screen sizes l and xl. With 12 total columns and the content being 6 columns an offset of 3 will result in the content being centered.
The style.css can be updated to only set the background-color:
#mainContent {
background-color: blue;
}
I added a wrapper to index.html like so
<div id="mainContent" class="row">
<div class="valign-wrapper">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
Now the white boxes are centered in the middle on both smaller resoultion displays and bigger.
Related
From what I've learned about <amp-carousel> it has only 2 types of carousel interface: carousel and slides, which you can see on the AMP example website. I need to create something like this, multiple columned carousel. Is AMP carousel able to achieve this?
You can't customize amp-carousel the way you want, you need to check out amp-base-carousel which allows you to set visible-count, advance-count and other useful properties.
The documentation.
Example :
<amp-base-carousel
loop="true"
height="450"
layout="fixed-height"
visible-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
advance-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
>
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<button slot="next-arrow" class="carousel-next" aria-label="Next">
<i class="fas fa-chevron-circle-right"></i>
</button>
<button slot="prev-arrow" class="carousel-prev" aria-label="Previous">
<i class="fas fa-chevron-circle-left"></i>
</button>
</amp-base-carousel>
With some style for the buttons :
.carousel-prev, .carousel-next {
filter: drop-shadow(0px 1px 2px #4a4a4a);
width: 40px;
height: 40px;
padding: 20px;
background-color: transparent;
border: none;
outline: none;
font-size: 24px;
opacity:0.7;
}
In a way, yes.
You can use the slide interface, in under each section, but 4 entries.
<amp-carousel height="300" layout="fixed-height" type="slides">
<div>
<div class="blue-box"> 1 </div>
<div class="red-box"> 2 </div>
<div class="green-box"> 3 </div>
<div class="yellow-box"> 4 </div>
</div>
<div>
<div class="blue-box"> 9 </div>
<div class="red-box"> 8 </div>
<div class="green-box"> 7 </div>
<div class="yellow-box"> 6 </div>
</div>
</amp-carousel>
I understand it won't be shifting with one entry at a time, but I suppose it would be near to what you want
I have added a jumbotron to my webpage, my page is now displaying the bottom and right scroll bar! Not sure how to resolve this.
Any tip's or pointers much appreciated.
url http://tyrescanner.net/contact-us
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1><span style="color: #ffffff;">Welcome to Tyrescanner</span></h1>
<p></p>
<h2>Contact us.</h2>
</div>
</div>
</div>
</div>
what are you asking for? I assume you just don't want bottom scrollbar ,is that right?
If so, below is your CSS for HTML . change that as below it's in your bootstrap.css file and line number 1071
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
overflow: auto;
overflow-x: hidden;
}
Your jumbotron is wrapped with divs row and col-md-12:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
Delete them and leave only jumbotron.
or remove paddings from your css:
.container-fluid {
width: 100%;
padding-top: 0px;
/* padding-left: 0px; */
/* padding-right: 0px; */
padding-bottom: 0px;
}
It overwrites bootstrap css and cause problem with page width.
After viewing your site I see some issues:
You're using a container-fluid and a nested container-fluid as the jumbotron parent element, the nested one is redundant.
Then I see you've overridden container-fluid and .col--12 classes default bootstrap left/right padding to 0px but you didn't change the default margin of the .row class to have 0px left/right margin hence your bottom scroll bar.
For the footer, remove the margin-top and make the footer a direct child of the body element then add the following css to the form, body and html elements: height:100%;, the rest is margins that you added to the elements.
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
I place dgrid table into widget, but grid overlapped my toolbar. How to fix broken layout?
Here current layout for my custom widget:
<div data-dojo-type="desktop/users/UsersWidget">
<div data-dojo-type="dijit/layout/LayoutContainer">
<div data-dojo-type="dijit/Toolbar" data-dojo-props="region: 'top'">
<!-- Here buttons, separators, etc -->
</div>
<div data-dojo-type="desktop/grids/UsersGrid" data-dojo-props="region: 'center'"></div>
</div>
</div>
Also, CSS:
html, body, .layout-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
index.html
<body class="Claro">
<div data-dojo-type="dijit/layout/LayoutContainer" class="layout-container" id="layoutContainer">
<div data-dojo-type="desktop/menus/MainMenu" data-dojo-props="region: 'top'"></div>
</div>
</body>
My widget initialized when user select one of main menu items and added as child of layoutContainer widget.
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.