On trying to implement the Grid Layout, when i provide cell span values specific to device such as "mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-desktop". The layout remains the same across desktop as well as mobile device. However according to the documentations of MDC , the cell should have updated as per the device on which the content is viewed.
You can see the below mentioned code in working condition at bodana.napcraft.in
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<!-- Newsletter Section Begins-->
<section id="sixthSection">
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-6-desktop">
<img src="/resources/images/newsletter.png" style="width: 100%" />
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-12-phone" style="padding-top: 5vh; background: #E3C5B8;">
<center>
<span class="secondaryTitle">THE DEW'S NEWSLETTER</span><br/><br/>
<span class="largeText">To receive more freebies, latest news and so much more!</span></center><br/>
<div class="mdc-layout-grid__inner">
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Name</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<div class="mdc-text-field" style="width: 100%">
<input class="mdc-text-field__input" id="text-field-hero-input">
<div class="mdc-line-ripple"></div>
<label for="text-field-hero-input" class="mdc-floating-label">Email</label>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
<!-- Row Begins -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
<center><button class="mdc-button mdc-button--outlined subscribeButton">SUBSCRIBE</button></center>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
<!-- Row Ends -->
</center>
</div>
<!-- Row Ends -->
</div>
</div>
</section>
I would like to understand as to why my grid isn't updating as per device.
For the grid layout to work correctly, the following meta tag needs to be inserted in the tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
Forgive my simple questions but im rather new to coding and im having trouble making my columns side by side, i was able to link images and external websites the way i wanted to but now have no idea how to get these two to be side by side. hopefully soon enough ill actually take the time and finally learn HTML but for now, im just shooting from the hip!
<div align="center">
<div style="width: 25%;">
<div class="section group">
<div class="col-sm- span_1_of_2">
<div class="container">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
<div class="col-sm- span_1_of_2">
<div class="container2">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;"/>
</div>
</div>
</div> <!-- end width 25% div -->
</div> <!-- end master centering div -->
<br /><br />
</div>
The code you have provided is rather confusing. If I understand your question, you are trying to place the two images next to each other. Since you are using bootstrap, I would suggest:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsup-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
<div class="col-sm-6">
<img src="https://lirp-cdn.multiscreensite.com/71976d90/dms3rep/multi/opt/content-reviews-thumbsdown-1920w.jpg" alt="Thumbs Up Reviews CTA" style="border: none;" />
</div>
</div>
</div>
This is what I would do in your situation. I do not understand the code you have provided though, but this should work.
I'm trying to create a virtual roulette wheel. Right now my concerns are strictly aesthetic. In the text-well on the right, the number in the #chipsInv won't center, except when I put an html "center" tag, and then for some reason it creates a huge amount of empty space at the bottom.
Here is my code, I've left out the Javascript since I assume it's irrelevant:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
In Bootstrap, as best you can / where you can, use the Bootstrap classes to provide the styling you're looking for, as the Bootstrap classes are designed to be compatible with one another.
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
If you want to text center everything in your example you can simply add the text-center class next to your well well-lg classes, as follows :
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
Additionally;
with Bootstrap, they recommend you use div's where possible, and then
you can specify different behaviour by modifying the classes of those
divs, such as "d-inline", or "d-block". That was the reason I changed
your spans to divs.
Ensure your col-lg-6 div is contained within a div with class "row", and that according to the docs, these divs specifying col div when added together do not exceed 12. Bootstrap Grid Docs
I been trying to display below attached image vertical column wise Grid view using Bootstrap in HTML. Can give me some idea for how we can achieve this .
Now i am normally display row wise column grid with reference of Grid systems on w3school.but this are not responsive to mobile view. So I need to display on vertical
Thank you in advance !!
I divided thesection into vertical columns. Inside each column I inserted row class to further divide row into column.
h2,h1 {
background-color: #ffffff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section class="text-center clearfix">
<!-- Divided sections into column-->
<div class="col-4 float-left" style="background-color:red">
<h1>col-1</h1>
<!-- Each column contains row-->
<div class="row" style="background-color: #ff3333">
<!-- You can further divide vertical column-->
<div class="col-6">
<h2>item-1(a)</h2>
</div>
<div class="col-6">
<h2>item-1(b)</h2>
</div>
</div>
<div class="row" style="background-color: #ff4d4d">
<h2>item-2</h2>
</div>
</div>
<div class="col-4 float-left" style="background-color:green">
<h1>col-2</h1>
<div class="row" style="background-color:#1aff66">
<h2>item-1</h2>
</div>
</div>
<div class="col-4 float-left" style="background-color:blue">
<h1>col-3</h1>
<div class="row" style="background-color: #0069cc">
<h2>item-1</h2>
</div>
<div class="row" style="background-color: #4d94ff">
<h2>item-2</h2>
</div>
<div class="row" style="background-color: #b3d1ff">
<h2>item-3</h2>
</div>
<div class="row" style="background-color: #cce6ff">
<h2>item-4</h2>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
For vertical column wise Grid view you can use
$('.grid').masonry({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
// use element for option
columnWidth: '.grid-sizer',
percentPosition: true
})
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
<div class="grid">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
...
</div>
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
You can use this link for reference
https://masonry.desandro.com/
You can use bootstrap 4 flex utility
https://getbootstrap.com/docs/4.0/utilities/flex/
The row class in bootstrap, when added to a div, should cause it to cover the entire width of the screen. It's working in most divs but seems to fail in some cases. Can someone point out my errors? I've tried reading the documentation. What have I missed?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>My Clock App</title>
<script src="knockout-3.2.0.min.js"></script>
<script src="jQuery.js"></script>
<script defer src="main.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="openBar" class="row">
<span id="openButton" data-bind="click: openNav">☰ open</span>
</div>
<div class="row">
<h1>My World Clock</h1>
</div>
<br>
<div data-bind="foreach: countries">
<div class="row throw">
<--adding row instead of col-md-12 causes issues-->
<div class="col-md-12">
<h3>Pikachu</h3>
</div>
<div class="col-md-2">
<h3 data-bind="text: name"></h3>
</div>
<div class="col-md-2">
<h5 data-bind="text: day"></h5>
<p data-bind="text: date"></p>
<p data-bind="text: time"></p>
</div>
<div class="col-md-2">
<h5 data-bind="text: capital"></h5>
<p data-bind="text: currency"></p>
<p data-bind="text: coor"></p>
</div>
<div class="col-md-2 languages" data-bind="foreach: lang">
<p data-bind="text: name"></p>
</div>
<div class="col-md-2 altName" data-bind="foreach: alts">
<p data-bind="text: $data"></p>
</div>
<div class="col-md-2 flag">
<img data-bind="attr:{src: imgSrc}">
</div>
</div>
</div>
</div>
</body>
</html>
It sounds like you're trying to nest a .row within a .row. .row elements have a negative left and right margin that matches the left and right padding of .col- elements. .col- elements should be the child elements of a .row. This allows the outside edge of the columns gutter to line up as expected.
Since you are attempting to .row you're going to have a total of -30px for the left and right margins, pulling your content to the outsides further than wanted.
Demo of double nested .row.
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
<div class="row">
<div class="col-md-12">12 Columns</div>
</div>
<div class="row">
<div class="row">Row Row</div>
</div>
Notice that the second row should show Row Row, but it doesn't. The left negative margin pulls the first Row outside of the viewports view.
Since .row isn't simply a descriptive feature and applies styling with real consequences I suggest removing the class from the DIV.
So, I am new to responsive design and placed Form code on top of one image and it will not display in mobile view. It appears to happen around 990px wide that the form will go out of vision. I can't identify where the #media or what CSS class would hide the form after it goes to a certain width.
URL: subscribe.ign.com/social
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<img src="http://static.ziffdavis.com.s3.amazonaws.com/cimages/blackfriday/Black-Friday-Email-Landing-Pages/black-friday-chaos-store-1600x750.png" alt="">
<div class="slider-caption visible-md visible-lg">
<div id="bouncex" align="center" style="width:558px; margin: 0 auto; ">
<!--LYRIS-->
<div class="heading-section col-md-12 text-center">
<div class="contact-form" style="background-color:#000 !important; padding: 25px">
<h2 style="text-transform:capitalize; font-size:34px">BLACK FRIDAY IS COMING</h2>
<br/>
<p style="text-transform:capitalize; font-size:28px">UP TO 50% OFF</p>
<h2 style="text-transform:capitalize; font-size:24px">ON HOTTEST GAMES AND TECH DEALS DELIVERED TO YOUR INBOX</h2>
<form name="contactform" id="contactform">
<p><input name="txtEmail" id="txtEmail" type="text" placeholder="Your Email">
</p>
<input type="button" class="mainBtn" name="btnSubscribe" id="btnSubscribe" value="Subscribe">
<input type="hidden" name="txtList" id="txtList" size="70" value="ign-deals" />
<p style="color:#FFF;font-size:14px">Subscribing to a newsletter indicates your consent <br/>to our <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/terms-of-use" title="Terms of Use" rel="nofollow">User Agreement</a> and <a style="color:#d3222a; text-decoration:underline" href="http://www.ziffdavis.com/privacy-policy" title="Privacy Policy" rel="nofollow">Privacy Policy</a><span id="article-punctuation" class="article-punctuation">
</span></p>
</form>
</div> <!-- /.contact-form -->
</div> <!-- END LYRIS -->
</div>
</div>
</li>
</ul>
</div> <!-- /.flexslider -->
</div> <!-- /.slider -->
</div> <!-- /.site-slider -->
just set :
<ul class="slides" style="list-style:none; padding-left: 0;">
<img style="width: 100%; " src="your url" alt="">
Try it now : http://codepen.io/anon/pen/qOJEaw
Your div with slider-captionclass also has visible-md visible-lg, you should remove this 2 classes. Basically, it makes that div visible only on screens with 992px width or bigger.
You can learn more about it on bootstrap documentation
The reason it is 'disappearing' is because of the parent element: <div class="slider-caption visible-md visible-lg">.
It is getting display: none !important; at 992px which is a bootstrap breakpoint. Specifically though it is the visible-* class that is doing it. Read about that in the Bootstrap docs.