OK So Im FINALIZING a clients website and Im using bootstrap 3 I have created this code for the website. It displays everything in the the first div and the second (middle) Div correctly but It doesnt display anything after that. I put it in a fluid container and It still doesnt display the last div nor any of the code that I have after this. I am using Notepad++ to edit and check my errors live and I dont see any error here? what could be the problem with this.
<div class="container-fluid" style="background-color: rgba (0,0,0,0.8)">
<div class="col-xs-2 col-sm-2 col-md-2">
<img src="../images/BluelinesandBigFaces.jpg" class="img-responsive"><br><button class="btn-warning" onmousedown="player1.loadPlaylist(0)">PLAY</button>
<img src="../images/pantiesdrop.jpg" class="img-responsive"><br><button class="btn-warning" onmousedown="player1.loadPlaylist(2)">PLAY</button>
<img src="../images/sidechick.jpg" class="img-responsive"><br><button class="btn-warning" onmousedown="player1.loadPlaylist(3)">PLAY</button>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dWU4e6kFaaw"</iframe>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<img src="../images/BluelinesandBigFaces.jpg" class="img-responsive"><br>
<img src="../images/BluelinesandBigFaces.jpg" class="img-responsive"><br>
<img src="../images/BluelinesandBigFaces.jpg" class="img-responsive">
</div>
</div>
<br>
<div class="row" style="background-color: rgba (0,0,0,0.8)">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MusicPageAd -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7512006871298343"
data-ad-slot="6094032318"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<br>
<div class="container-fluid" >
<div class="col-sm-10 col-md-10" style="background-color: rgba (0,0,0,0.8)">
<!--iFrameToVerticalPostPage-->
</div>
<div class="col-sm-2 col-md-2" style="background-color: rgba (0,0,0,0.8)">
Welcome Msg<br>
Twitter Feed<br>
Cost 2 Coast Side Ad
Facebook Feed<br>
ReAdvertisement<br>
</div>
</div>
Tag closing issue:
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/dWU4e6kFaaw"> // <-- close this
</iframe>
Always try to look at start and end tags - in any editor and even on code snippet above, if they're not the same color - there's something wrong!
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 get three images to cumulatively take up an entire bootstrap row (effectively each taking up a column that spans 4). However, my code right now has them leaving gaps in between, and on either side. I've attached a screenshot of the problem, with the ideal solution to have the images take up the entire space without leaving any gaps. Below is the relevant html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%">
</div>
</div>
</div>
</body>
Screenshot of Issue
Bootstrap columns have default right and left padding of 15px. Inspect the columns in devtools and you will see it. You need to over ride it with your own custom css.
Here you go with a solution https://jsfiddle.net/hhzbxrbf/
.col-md-4 {
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" />
</div>
</div>
</div>
</body>
I have a div that lists screenshots for my software that I'm displaying on a website. When the screen is big the images align properly.
The problem is when I view it on the phone or change the window size on the computer to collapse the items, there's empty space where it's not being aligned properly for some reason. See Picture below.
Here is the Code on the index page. In my opinion, everything should work fine without adjustments.
Things I've tried:
-Removing the container and row classes.
-Changing the width of the images all the way down to 80%, which even 100% SHOULD work
-Adding class="img-responsive" as seen in another thread.
-Removing margins and padding for the divs the images are in.
<!-- Screenshots -->
<div id="screenshots">
<div class="container">
<br>
<div class="row text-center"> <!-- Screenshot DIV -->
<h2>Screenshots<h2>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/dashboard.png" alt="Dashboard SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/lotmanager.png" alt="Lot Manager SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/register.png" alt="Register SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/sell.png" alt="Auction SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/checkout.png" alt="Checkout SS" class="img-responsive" width="100%"/>
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/samplereceipt.png" alt="Receipt SS" class="img-responsive" width="100%" />
</div>
</div><!-- /.Screenshot DIV -->
<br>
</div><!-- /.container -->
</div><!-- /.screenshots -->
Any help would be appreciated.
One Error in Your Code, Please check after correct /h2
<h2>Screenshots</h2>
It is due to different height of the images. What can u do Set the parent div of the img to the maximum height from the group of the images?
var maxheight;
$('#screenshots .container > div > img').each(function(){
var currHeight = $(this).height();
if(maxHeight < currHeight) {
maxHeight = currHeight;
}
});
if(window.width() < 768) {
$('#screenshots .container > div').hieght(maxHeight);
}
I'm developing a small mobile app using Ionic and am struggling to display an image inline with a text.
<ion-view title="Beer">
<ion-content class="has-header">
<div class="row">
<div class="col text-center">
<h2>Brooklyn</h2>
</div>
</div>
<div class="row">
<div class="col col-40">
<p style="text-align: right;"><b>Country:</b></p>
</div>
<div class="col" >
<p style="text-align: left;"><img ng-src="img/flags-mini/us.png" /> United States</p>
</div>
</div>
</ion-content>
</ion-view>
As I'm very inexperienced with CSS I'm having a hard time to display the United States flag and have the < p > content vertically centralized. The way it's now the text is displayed at the bottom of the row and not in the center:
I have tried different things: tweaking the < div>'s to define inline css styles to try to bring the text up a bit, moving the flag to a separate col, defining margins, etc. Nothing worked.
Does anyone know how to get them aligned?
Here's one way how you can do it:
<ion-view title="Beer">
<ion-content class="has-header">
<div class="row">
<div class="col text-center">
<h2>Brooklyn</h2>
</div>
</div>
<div class="row">
<div class="col col-40">
<p style="text-align: right;"><b>Country:</b></p>
</div>
<div class="col" >
<img ng-src="img/flags-mini/us.png" style="float:left; margin-right: 5px;"/>
<p style="text-align: left;"> United States</p>
</div>
</div>
</ion-content>
</ion-view>
So, what did I do? I took the img tag out of the p tag and added the float:left; margin-right: 5px; CSS rules to this image. Rest is left intact.
You can see the example working on Codepen: http://codepen.io/anon/pen/JGwNqM
I haven't found any working solution for my problem so I really hope you can help me.
Here is my jsfiddle.
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
<!-- snippet 1 -->
<div class="col-md-12 col-sm-12">
<div class="col-md-6 col-sm-6" style="padding:0;">
<div class="well" style="border-right:1px solid black;">
Test
</div>
</div>
<div class="col-md-6 col-sm-6" style="padding:0;">
<div class="well">
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
</div>
</div>
</div>
<!-- snippet 2 -->
<div class="col-md-12 col-sm-12">
<div class="col-md-9 col-sm-9" style="padding:0;">
<div class="well" style="border-right:1px solid black;">
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
srewdf<br>srewdf<br>srewdf<br>srewdf<br>
</div>
</div>
<div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
<div class="well">
Test
</div>
</div>
<div class="col-md-3 col-sm-3" style="padding:0;height:50%;">
<div class="well">
Test
</div>
</div>
</div>
In snippet 1 I need multiple nested elements to have the same height based on the largest element.
In the second snippet it's similar. The two elements on the right side should have together the same height as the element on the left.
How is it possible to solve this without losing the responsibility?
Thanks for your time and help!
Equal height columns is a famous problem in the CSS model, and Bootstrap can do very little to help you.
The best you can do is read the broad amount of literature out there (I recommend starting with http://css-tricks.com/fluid-width-equal-height-columns/) and work out which of the various hacks and limitations are the correct fit for your purposes. This will differ based on the target browsers, the amount of time you want to invest, your experience with Javascript and the devices you're targeting.
Thanks for all your answers / comments.
This is how I solved it now:
$( document ).ready(function() {
var heights = $(".equalize").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".equalize").height(maxHeight);
});
I hoped that I can do it with plain HTML/CSS but yeah, this is the simple way.