Technologies:
Bootstrap 3
Less
Jade
Angular
Issue:
I'm using .col-xs-12.col-md-6 for the section.
For some reason when it should switch from .col-md-6 and .col-xs-12 should be applied so that the column can stretch the full width of the screen, the layout doesn't spread out until 743 screen width. (It should go full width at 991px or if i'm wrong atleast 767px screen width).
I have custom styling on .col-md-6 and apply 49% to the width of that class bc .col-md-5 was too small and .col-md-6 was too large to add the needed 20px margin space in between. (styling guidelines).
I removed the width: 49%; when seeing what would happen at the 992 and 768 break point and there is nothing.
It just breaks at random breakpoints.
(I've tested where it breaks for col-lg-6 and col-xl-6 or 5 .. just to test it out and it continues to break in break point areas not connected to the usual 768, 992, 1200 etc.)
I have removed styling from every place possible to see if thats effecting it ..
This is an include file and so even styling connected to the main page. (I put it back bc that wasn't the cause).
These break point additions have worked in the past I don't know whats wrong now.
My only other alternative is using media queries instead which I will try in the meantime but I am wanting to avoid that.
Update:
I reformatted the code in an entirely separate file from the project and put it in regular html and it worked fine. I copied and pasted the code at the very bottom. I removed angular and left it hard coded so that i can open in the browser quickly. I am thinking it may have something to do with the surrounding files in this project. I copied and pasted the code at the very bottom.
Jade file:
#pizza
.col-xs-12
h3 Other Shops
.col-xs-12.col-md-6(ng-repeat="other in otherShops")
.col-xs-12(ng-repeat="tag in other.tags | limitTo: 1")
img(ng-src="{{tag.sm_active_url}}")
{{tag.name}}
.col-xs-3
img(src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg", alt="placeholder image")
.col-xs-8
h2
a(href="#/shops/{{shop.id}}/detail") {{ other.name }}
.glyphicon.glyphicon-road
.glyphicon.glyphicon-unchecked
p {{ other.address }}
p {{ other.phone }}
button.btn.col-xs-12.makeAppointmentBtn(type='button', ng-controller='makeAppointmentCtrl', ng-click='open()') Make Appointment
Less:
#pizza{
h3{
color: #999;
}
.col-md-6{
background-color: #ffffff;
border-radius: 8px;
margin-bottom: 50px;
padding-left: 0;
padding-right: 0;
// width: 49%;
min-height: 440px;
&:nth-child(even){
margin-right: 20px;
}
h2{
a{
color: #000;
}
a:hover{
text-decoration: none;
}
}
.col-xs-3{
margin-left: 20px;
margin-top: 30px;
img{
width: 100%;
}
}
.btn{
position: absolute;
background-color: #003366;
padding: 10px;
border-radius: 8px;
color: #fff;
bottom: 0;
left: 0;
}
.glyphicon{
color: #999;
font-size: 24px;
}
.col-xs-12{
font-size: 24px;
margin-top: 20px;
img{
margin-left: 20px;
}
}
.col-xs-8{
margin-bottom: 40px;
}
}
}
Reformatted code:
<!DOCTYPE html>
<html class="full" lang="en">
<head>
<title>Pizza</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-xs-12 col-md-6 ng-scope">
<div class="col-xs-12">
<img ng-src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png" src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png"> Tools</div><!-- end ngRepeat: tag in other.tags | limitTo: 1 -->
<div class="col-xs-3"><img src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg" alt="placeholder image"></div>
<div class="col-xs-8">
<h2>Pizza Place
<div class="glyphicon glyphicon-road"></div>
<div class="glyphicon glyphicon-unchecked"></div>
</h2>
<p>1234 M Ave, Austin, TX 27000</p>
<p>(555) 400 2800</p>
</div>
<button type="button" class="btn col-xs-12 makeAppointmentBtn ng-scope">Make Appointment</button>
</div>
<div class="col-xs-12 col-md-6 ng-scope">
<div class="col-xs-12">
<img ng-src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png" src="https://garageapi.herokuapp.com/tag_tab_icons/Tools/icon-tool-darkblue-25.png"> Tools</div><!-- end ngRepeat: tag in other.tags | limitTo: 1 -->
<div class="col-xs-3"><img src="http://www.carlotfinance.com/assets/img/car_placeholder.jpg" alt="placeholder image"></div>
<div class="col-xs-8">
<h2>Pizza Place
<div class="glyphicon glyphicon-road"></div>
<div class="glyphicon glyphicon-unchecked"></div>
</h2>
<p>1234 M Ave, Austin, TX 27000</p>
<p>(555) 400 2800</p>
</div>
<button type="button" class="btn col-xs-12 makeAppointmentBtn ng-scope">Make Appointment</button>
</div>
</body>
</html>
Related
I am having big trouble with my website as it is not being responsive. I already included the required script for adjusting page to device width on the html :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I also made sure I was using 320px as minimum device width and 688px as maximum for my media queries but it seems it doesn't work at all. By trouble I mean I am encountering the following issues:
First: Since editing the file on my liveport, I could notice that the page could scroll to the right, and if done, you can see like a kind of black "empty" space that goes from top to bottom of the entire document, again, located at the right hand of the page. This is my major issue as on mobile phones the page's content is not over the body but rather located at half over the body and this mysterious black empty space I cannot fix. I don't know if it has something to do with the body of the page, I already tried multiple methods but it still doesn't work.
Second: As a result of the first problem, some elements appear shifted and floating. It is as if this empty space is not part of the page and generates a strong distortion in the rest of it and its other elements.
[A picture of the issue][1]
The blue part is the body element, the black is not defined in any part of the document. It is also worth mentioning this is mobile view in a PC, as when viewing in phones it gets worse as this black spaces takes over have of the page's space.
The following code is my HTML and CSS for the page on PC and mobile devices, respectively:
body {
background: linear-gradient(to right, #000, #1d152f);
position: relative;
height: 100%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
#media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
display: grid;
grid-template-columns: auto;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
padding-left: 20px !important;
margin: 15px 15px;
}
.image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
}
}
}
<body>
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1><img src="" alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here</p>
<p class="max-700">text goes here</p>
</div>
<body>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="" alt="logo" id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are leaving example.comtext goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" style="padding-left: 45px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the Terms of Service</p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class= "link-to-app" disabled><i class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</div>
</div>
</body>
Third: On media query view in PC, the image behind my h1 text is placed correctly, but again when viewed on mobile devices, it is completely messed up.
Fourth: There is a recaptcha at the footer that disables and enables a contact button that opens the user's email app. The recaptcha works fine in both types of devices, nevertheless, the button only works in computers and not in phones. This is the code I am using for this:
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:myemail#gmail.com" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit" style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an email</button>
</form>
</fieldset>
Fifth: I guess this is the result of all the issues described above; the page is obviously not adapting to device width and every time I open it on devices with different screen sizes it is completely different.
This is the Screenshot of the issue with the page being viewed on mobile view
The Issue is your .image-9 class. Add same css as shown below and add an image as shown in html below. I think this should work for you. Also a small tip: use background-color: #000; a backup for not supported browsers when using gradient colours.
Revised CSS-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto Serif', serif;
font-weight: 400;
}
body {
background-color: #000;
background: linear-gradient(to right, #000, #1d152f);
/* background-image: linear-gradient(to right, #000, #1d152f); */
position: relative;
height: 100%;
}
.modal__logo {
width: 10%;
}
.image-9 {
max-width: 100%;
padding: 0 1rem;
}
#media screen and (max-width: 688px) and (min-width: 320px) {
div.container {
/* display: grid; */
/* grid-template-columns: auto; */
max-width: 1440px;
margin-right: auto;
margin-left: auto;
padding-left: 25px !important;
padding-right: 25px !important;
}
h1 {
font-size: 3rem !important;
/* padding-left: 20px !important; */
/* margin: 15px 15px; */
}
/* .image-9 {
top: 250px !important;
right: 110px !important;
bottom: 0%;
max-width: 100% !important;
display: grid;
} */
}
Revised HTML -
<div class="container">
<h1>Text goes here<br>text goes here<br>text goes here</h1>
<img
src="https://images.pexels.com/photos/4577703/pexels-photo-4577703.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="" class="image-9">
<p style="color: #4a8ad3; font-family:'Roboto Serif', serif; font-size: 1.2rem; font-weight: bold;">text goes here
</p>
<p class="max-700">text goes here</p>
</div>
<div class="redirect-modal" id="modal">
<div class="modal-content">
<div class="close">+</div>
<img src="https://static.wixstatic.com/media/2c0034_400708cb5f7d44bcb1f272ebc2a51aab~mv2.png" alt="logo"
id="navbar__logo" class="modal__logo">
<br>
<br>
<strong style="font-size: 0.8rem;">text goes here</strong>
<p style="color: whitesmoke; font-size: 0.9rem; font-family: Roboto Serif;">By accessing this link you are
leaving example.comtext goes here<br></p>
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;"
data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback"
data-theme="dark"></div>
<br />
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<form action="mailto:myemail#gmail.com" method="POST" enctype="multipart/form-data">
<button onclick="sendContact();" type="submit" id="submit"
style="width: fit-content; padding-left: 10px; padding-right: 10px; margin: 5px;" disabled>Send us an
email</button>
</form>
</fieldset>
<p class="max-700" style="font-size: 0.7rem">By logging in, you agree to the <a href="terms.html"
style="color: #4a8ad3; font-size: 0.8rem;">Terms of Service</a></p>
<form action="example.com">
<button type="submit" value="login" id="link-to-app" class="link-to-app" disabled><i
class="fa-solid fa-up-right-from-square"></i>Login</button>
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</div>
</div>
I made a little landing page and the client wants: "The text, Sourcing & Trading, CCTV security. Want to use overstriking.
Then all will be OK." I googled what overstriking is and I have to admit I'm a little hazy on the concept and not sure how to implement it with CSS at.
The code I tried is in the snippet bellow. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
footer{
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height:100px;
line-height: 10px; /* Vertically center the text there */
padding-top:10px;
background-color: #f5f5f5;
margin-top: 10px;
}
.main-buttons {
width: 400px;
height: 50px;
margin: 0 auto;
text-decoration: line-through;
}
span{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.main-container {
background-image: url('http://wenshin.ltd/wp-content/uploads/2018/07/logisticsworldmap-1024x586.png');
height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
.middle{
top: 50%;
}
.btn-lg {
box-shadow: 3px 3px #888888;
}
h1 {
text-shadow: 1px 1px #888888;
}
.logo {
width: 50%;
}
</style>
</head>
<body class="main-container">
<div class="container middle">
<div class="row ">
<div class="col-md-12 text-center ">
<div class="intro"> <br> <br> <br> <br>
<img src="http://wenshin.ltd/wp-content/uploads/2018/08/WS-01.png" class="img-fluid logo" alt="Logo"> <br> <br>
<h1 class="">WELCOME TO WENSHIN <br> INDUSTRIAL CO LIMITED</h1>
<p>
<a href="http://www.wenshin.ltd/index.php">
<button class=" main-buttons btn btn-light btn-lg mt-3">Sourcing & Trading</button>
</a>
</p>
<p>
<a href="http://www.cctvcamerahd.com/">
<button class="main-buttons btn btn-light btn-lg mt-3">CCTV Security</button>
</a>
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-center"><p><strong>Choose your language:</strong></p></span>
<span class="text-center"><p><span>English</span> <span>繁體中文</span> <span>Español</span> <span>Português</span> <span>Deutsch</span> <span>Français</span> <span>Italiano</span> <span>Pусский</span> <span>한국어</span> <span>日本語</span> <span>Nederlands</span> <span>غة العربية
</span> <span>Indonesian</span>
</p></span>
</div>
</footer>
</body>
</html>
I used:
text-decoration: line-through;
And I wondered if that's it or is there something alternative.
First of all, I would ask my client what he means by that.
Most people mean a strikethrough by saying overstrike.
You would just have to add this to your css for these buttons.
text-decoration: line-through;
As for the overstriking, it is an old technique used in the time of typewriters to write letters that where not on the "Keyboard". It doesn't really make sense anymore.
Cheers!
This just in.... I managed to answer my own question.
Since it turns out that (at least for my device) the inline «style» attribute accepts «/**/» comments like its stylesheet cousin, I thought it would be helpful to "good doctor" the code to make it easier to follow:
<p style="text-align: justify;">An element with «position: relative;»
[such as
<span style="/*Block setup*/display: inline-block; position: relative;
/*Adjust to match print baseline*/vertical-align: -7.5%;
/*Block width*/width: 6.5em;">
<span style="/*Element Name*/position: absolute;
left: 0em;">Cæsium (</span>
<span style="/*Isotope weight*/font-size: 60%; vertical-align: 55%;
position: relative;/**/ left: 6.0em;">133</span>
<span style="/*Atomic number*/font-size: 60%; vertical-align: -25%;
position: relative;/**/ left: 4.6em;">55</span>
<span style="/*Element Symbol*/position: relative;
left: 2.5em;">Cs)]</span>
</span> is positioned relative to its normal position:</p>`
The user may need to jiggle about the «width» and «left» properties to smooth out the spacing for their system (as well as prune the comments if storage space us at a premium).
I am struggling with getting a navbar to contain:
My brand image
A long search bar and button to submit filling the entire navbar height
Enough room at the end of #2 for one more button of the same height
... all in one line, without collapsing.
However, for the life of me, I cannot get anything to stay on the same line as the nav bar after I place the search bar from #2. I have tried putting the search form in a column as in below, using display: inline in different places, navbar-right, etc.
Please let me know if this is an easy fix. I'd like to have some control over how long the search field is as well.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
<nav class="nav" id="navigationBar">
<a class="navbar-brand" href="/""><img src="mylogo.png" class="logo-small">BRAND IMAGE</a>
<div class="row">
<div class="col-sm-10">
<form>
<div class="input-group" id="searchBar">
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
<span class="input-group-btn">
<button type="button" id="searchButton" onclick="this.blur();"><i class="flaticon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-sm-2">
<!-- HERE is where I want to place another button to fill the remaining space in the nav bar -->
</div
</nav>
I'm rewriting my original answer, because I made a couple of stupid assumptions, and didn't provide anything very helpful using the provided code.
As mentioned by others in previous comments, it might be most helpful to better understand grid layouts and how they work in a larger context.
Bootstrap has some great features specifically for grouping form elements and controls together, specifying how you'd like them to layout.
Read more on that, here
This snippet uses the grid system to divide the nav element into 12 columns, and uses the col-[size]-[width] classes to define how many "columns" each element should occupy, and at which resolutions those rules should apply.
For example, you could use col-lg-4 along with col-xs-2 within the class attribute to tell that element to act differently at larger and smaller resolutions.
Grid classes apply to devices with screen widths greater than or equal
to the breakpoint sizes, and override grid classes targeted at smaller
devices. Therefore, e.g. applying any .col-md-* class to an element
will not only affect its styling on medium devices but also on large
devices if a .col-lg-* class is not present.
The documentation specifies how these work together, and gives lots of examples with #media queries, so I'd recommend giving it a thorough read.
You may also want to look at using the navbar controls to better align form controls within the nav element itself.
You can find some great examples of that, here.
Lastly, if you'd like to play with this example, here's the codepen.
Hope this answer helps you more than my last one did.
#searchBar {
border-left: 1px solid rgb(216, 216, 216);
border-right: 1px solid rgb(216, 216, 216);
}
#searchText {
height: 62px;
}
#another_button {
height: 62px;
}
.search_bar_button {
height: 62px;
}
#searchBar input {
width: 100%;
}
#searchButton {
background-color: Transparent;
border: 0px;
height: 63px;
}
#navigationBar {
box-shadow: 0px 4px 8px -3px rgba(17, 17, 17, .16);
height: 63px;
}
a.navbar-brand {
padding: 0px;
font-size: 10px;
}
.logo-small {
margin-right: 14px;
margin-top: 7px;
margin-left: 19px;
width: 49px;
}
.another_button {
width: 100%;
height: 63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="nav navbar navbar-default col-xs-12" id="navigationBar">
<div class="col-xs-2">
<a class="navbar-brand" href="/">
<img src="mylogo.png" class="logo-small" />
BRAND IMAGE
</a>
</div>
<form class="col-xs-6">
<div class="input-group" id="searchBar">
<span class="input-group-btn">
<button id="searchButton" class="btn search_bar_button" type="button">Go!</button>
</span>
<input type="text" class="form-control" id="searchText" placeholder="Search here." onsubmit="search()">
</div>
</form>
<div class="input-group col-xs-4">
<span id="another_button" class="input-group-btn">
<button class="another_button btn btn-secondary" type="button">Button 2</button>
</span>
</div>
</nav>
So I uploaded a question that's the same as this one, however, that got very overcrowded so I am putting up the question again in hopes of explaining my problem a bit better.
I am currently making my own website using HTML, CSS, and JavaScript with bootstrap alongside. While trying to make the site mobile friendly, I have noticed an error with how 3 of the buttons are being displayed on the screen. Basically, what I want to happen is for the three buttons to be stacked on top of each other with a gap in between each one when the web page is viewed on mobile. However, the buttons aren't displaying correctly. See the first image.
One thing that I will say, though, is that I am using the feature (not sure if it's only in Google Chrome) that when you click inspect element, you can select an option that allows you to view what the web page will look like on a mobile screen. What I'm getting at, is that I don't know if it's the code that's wrong or if Google Chrome's feature doesn't work that well.
If you do have any suggestions for applications I could use to view the HTML file on a mobile device, please let me know.
PLEASE NOTE. I HAVE ONLY GIVEN THE CODE FOR ONE OF THE BUTTONS AS THE OTHER TWO ARE BASICALLY THE SAME
#media (max-width: 767px){
.btn-block-xs {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: rgba(255,255,255,0.3);
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 50px;
}
#cheapestOption ul{
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
<div class="container-fluid" id="grad"> <!-- Pricing Buttons -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £5 a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button>
</div>
(First picture shows what it looks like on mobile) (this is what needs fixing)
(Second picture shows what it looks like on desktop) (this is fine)
You html and css are not really following the bootstrap documentation. I suggest you read more on how bootstrap works. You can simplify a lot of what you are doing and probably make things look a lot better too.
I would suggest create a button which is a link and move the text out of it. To answer your question exactly please see this jsfiddle.
I moved your html to be in the correct col class Let me know if you have anymore questions,
html
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled>
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<p id="tempBottom"><strong>Coming Soon</strong></p>
</button></div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: red;
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#cheapestOption ul {
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
#averageOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#averageOption a {
text-decoration: none;
color: white;
}
#averageOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#averageOption ul {
text-align: left;
font-size: 17px;
}
#averageOption:hover {
background-color: rgba(255, 255, 255, 0.6);
}
#expensiveOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#expensiveOption a {
text-decoration: none;
color: white;
}
#expensiveOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#expensiveOption ul {
text-align: left;
font-size: 1em;
}
To simplify this for you here are a few things to remember,
Bootstrap is built for mobile first.
Each row consist of 12 pieces, so when you tell it col-md-4 you are saying that when the browser is the width of col-md you want that space to take up 1/3 of the width of the row.
You can target each browser size by default css built into bootstrap using col-xs col-sm -col-md etc... To see the default size of each col-size check the documentation or inspect element and check the class in the DOM.
Bootstrap Grid System
If you want the col-size to stack at certain screen widths this is what you can do.
If when the screen is sm you want them to stack you could do,
<div class="row">
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
</div> <!-- end of row -->
This will stack on sm size because when the screen is the width of the sm size it will take up 12 which is the whole space. So that media query will fire off and the col will now take up the whole row.
Remeber you can stack each class as well. So if you want to make sure each col stack starting with md you could do this,
<div class="col-xs-12 col-sm-12 col-md-12 ">
Now when the browser is at each of those class target widths whatever html is in that div will take up the whole row.
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}