i have been pulling my hair out over this and cant figure it out for days, would REALLY appreciate some help :(
I am using Drupal (and Views) to display a page of images. The Images are laid out using a Grid format. (I am willing to change it from Grid to another format if it will help achieve what i need easier).
What I have is 6 images going across and each image has a set width of 150px, the height of the image is set automatically.
The effect i want to achieve is to have the images sit ON TOP of each other, currently the height of the table the images sit on is all the same and there is a gap under each image, i want the images to site exactly under each other with just maybe 1px apart, similar to how they do it on Tumblr.
The code of how the table and images is printed is below, can someone help me? pleaseeee. From my search i THINK that im unable to do this using Tables. is that correct? If so then how would i do it so that i can keep a similar grid effect so images sit 6 next to each other on each row, and then fit nicely on top of each other ?
Thank you so much
<table id="container" class="views-view-grid cols-6">
<tbody>
<tr class="block">
<td class="col-1 col-first">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg"><div data-edit-id="node/3643/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
<a href="/members/ptarticle/woolie-003-0">
<img class="pthover" src="/files/styles/150x200/public/images/pinpage/760_w2.jpg?itok=_ux-EGvz" width="150" height="200" alt="" /></a>
<a href="/ptarticle/woolie-003-0" target="_self">
<p class="pttext">Woolie 003
</p>
</a>
</div></div></div></div> </div> </td>
<td class="col-2">
<div class="views-field views-field-field-image-pin">
<div class="field-content ptpageimg"><div data-edit-id="node/3642/field_image_pin/und/_custom_views">
<div class="field-item"><div class="domeimageo">
<img class="pthover" src="/default/files/styles/150x200/public/images/pinpage/tumblr_mohhz9Ce001sor33mo1_1280.jpg?itok=4wFQzr_h" width="150" height="200" alt="" />
<a href="/ptarticle/085" target="_self">
<p class="pttext">085
</p>
</a>
</div></div></div></div>
</div>
</td>
As answered in comments:
Aside from a plugin like isotope.js, elements sitting next to each other will go under no matter how high your row is. Unless using lots of floats and/or absolute positioning, this will happen. By default, a is meant to go under its preceding no matter the height. It's a 's nature.
Related
The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>
Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.
I am new to web development and am trying to make things work with Bulma CSS.
I want to show five image icons which are links to my public profile. I want those icons to come in a single row, preferably covering the whole screen for bigger screens (with start and end padding of course), and for smaller screens, I would have them in rather two or three rows (and three or two icons per row).
So far I have been able to achieve most of this using Bulma columns. For desktops, the icons are coming in a row, not as a chain covering all the area, but in the center of row. For mobile, it is working as intended: two rows of icon covering the whole screen width, each row having three icons. It is not the best, but it would work.
The current output and its code look something like this:
Output
Code
<section class="hero is-light">
<div class="hero-body">
<h3 class="title is-h3">Important links.</h3>
<div class="columns is-mobile is-multiline is-centered">
<img src="assets/img/home/email.png" class="image is-1by1" height="64" width="64" alt="gmail">
<img src="assets/img/home/linkedin.png" class="image is-1by1" height="64" width="64" alt="linkedin">
<img src="assets/img/home/github.png" class="image is-1by1" height="64" width="64" alt="github">
<img src="assets/img/home/medium.png" class="image is-1by1" height="64" width="64" alt="medium">
<img src="assets/img/home/twitter.png" class="image is-1by1" height="64" width="64" alt="gmail">
</div>
<div class="columns"> </div><!-- empty column group for space -->
<div class="columns is-mobile is-multiline is-centered">
Download My Resume .
</div>
</div>
</section>
My problem is the space between title "Important links" and the icons. Why is there such a huge vertical space in between them? How can I reduce it?
I would also like to know if there is a possibility to show these icons as equally spaced and covering the whole width for large screens; while doing the current multi line behavior for smaller screens.
It would also suit me, if all the three things (the title, the images and the download button) show in the same row for large screen (like: the title at the start, the icons in the centre and and the button at end) and the current solution for small screen. I guess it would be possible via nav, but I am not sure if we should have a footer represented by a nav and its associated classes. Maybe a grid could be applied here too?
Note: I would prefer a Bulma CSS solution with no JavaScript/vanilla CSS, but let me know if it isn't possible.
The is-h3 element has a 24 pixels bottom margin, and the .columns element also has a margin, and these add up. You are going to need to write some CSS to remove this margin:
.title { margin: 0; }
.columns {margin: 0; }
(You should probably give them unique selectors instead of changing all title and columns.)
I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.
This feels like a very simple problem that I am brain farting on. I have 3 images that I would like to display a certain way. Basically I want one image to fit a col-md/sm/xs-7 and 2 images to stack on top one another autofitting to col-md/sm/xs-3. All wrapped between a col-md/sm/xs-1 on either side.
I cannot figure out what CSS I need to tell the image to resize to that of the column. Any ideas?
Something like this?
<div class="row">
<div class="col-md-7">
<image class="img-responsive" src="largeimage.jpg" width="200" height="400"/>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<image class="img-responsive" src="yourSmallImage.jpg" width="200" height="200"/>
</div>
</div>
</div>
</div>
I don't quite understand what exact way you are trying to arrange pictures but I think this should help you. If you paint me a picture of how you want the pictures arranged I'll tailor my answer to you.
Edit: Ok, I think I might(?) understand now and this is my solution. You'll have to either size the images the way you want. Or, hopefully they are already the size you want it and will fit nicely. Give this a try.
I have 3 images which I need to display this way:
I tried to make it using simplest way:
<div class="row">
<div class="col-xs-9">
<img src="/image/1.jpg">
</div>
<div class="col-xs-3">
<img src="/image/2.jpg"><br /><br />
<img src="/image/2.jpg">
</div>
</div>
But there is a problem with sizing: images are uploaded by user so all of them can have different sizes and proportions (so image can be a square instead of rectangle). Also I need to limit max-height of the row because images can have up to 1024px height.
Can you help me, please? Thanks in advance.