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.
Related
For each div in my list, the hight is about one line lower. See the problem here: https://weather-software.com/weather-websites.html
I have tried different style tags and starting from scratch.
<!-- First Grid -->
<div class="w3-container w3-row-padding">
<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for website names here..." id="myInput" onkeyup="myFunction()">
<ul class="w3-ul w3-margin-top" id="myUL">
<li>
<a href="https://weather.gov">
<div class="w3-third w3-col w3-container">
<img src="background_1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>NOAA NWS Weather.gov</b></p>
<p>The NWS Mission: Provide weather, water, and climate data, forecasts and warnings
for the protection of life and property and enhancement of the national economy.</p>
</div>
</div>
</a>
</li>
<!--The list element is repeated three times-->
</ul>
</div>
I expect all the elements to be level. Instead, they step one line lower for each div.
The "problem" is here:
.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;
}
Take a look at example of W3.CSS, you will see the idea behind this (and isn't what you want).
I guess you must try with something like the example of W3.CSS Grid:
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Saludos!,
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">
I have some boxes which are perfectly aligned in every way except they are different heights. I'd like the heights all the same. They align at the bottom, on the sides, with the edge of the page, but at the top they're all different heights. I'm happy with the layout, 3 x3 but how to get the heights all the same size.
Page: https://adsler.co.uk/find-an-event/
#media (min-width: 768px) {
.box-layout {
max-height: 100%;
}
}
<div class="line-layout" style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data- longitude="">
<div class="event-info-row-
listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row">
<div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div>
<div class="col-md-4">
<div class="event-title">
<h4>New Cross and Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date" <date>2019-05- 26
</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event
ticket">#free</div>
</div>
<div class="col-md-3"></div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
Didn't work.
The problem is with your img tag.
Your images are different heights so that you are having different heights of each box.
You have 2 choices:
1- make all images with same width and height(not that easy)
2- you should fix img height, try something like:
#content .entry-summary img.wp-post-image, #content .entry-content img {
height: 250px;
}
.box-layout {
width: 100%
}
this should work as you want.
note that will be some margin on the left and right of each image because of different dimensions.
screenshot after editing as above:
The heights of your boxes are being determined by the size of the images. Luckily, your images are wrapped in a containing div with the class event-img. So, instead of resizing all your images, you could simply give .event-img a max-height of shorter than any of your images, and set it's overflow: hidden
.event-img {
max-height: 190px;
overflow: hidden;
}
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'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/></div></div>
<div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
</div>
</div>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.
Try position absolute with push. You can use Z-index to get the correct column on top.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="position: absolute; z-index: 1;">
<div class="loginpart">
<img id ="icon" src="" />
<h2 style="color: grey;">Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/>
</div>
</div>
<div class="col-md-8 col-md-push-4">
<img id="header" src="" />
<div class="mantra">
<h2 style="color: blue;">Go Wolves!</h2>
</div>
</div>
</div>
</div>