Image as columns are taking a huge vertical space - html

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.)

Related

Bootstrap wont put image and text in the middle side by side

I have try to put image in the right side and text in the left side,
but for some reason its the opposite and I don't know why,
By the way how can I shrink it to fit the "Can you see the simplicity behind the logo?" size.
Link to website
The column you want on the left should come first. So in this case the text.
Example
<div class="row">
<div class="col-xs-6">
[text]
</div>
<div class="col-xs-6">
[image]
</div>
</div>
You have the img-responsive class on the logo so it will scale depending on the viewport size. You also have a inline style with "height: 200px". Lowering this number would decrease the size of the logo.
The styles coming from bootstrap are setting your layout. For instance your image <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right"> has a float:left coming from bootstrap. You can override bootstrap styles by putting your styles inline like this <img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right" style="float: right;"> or by placing !important; after the styles you want to override other styles. Use the developer tool on the browser to analyze the css and you'll see what is affecting your page and what is not.

Adding a full width banner and making it bootstrap responsive

I'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
original site.
http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
If background image isn't working for you here is a simple solution:
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
You can set background image for header and remove/hide the logo image.
#header-row {
background-image: url(../images/logo-company.png);
}

Image sizes in bootstrap col-div

I have a page in three columns with col-md-4 like a thumbnail approach and then I have another page with col-md-8. In both I have to show an image, and I wondered if I can use the same image for both or if it would be better to have 2 images ( each with the propper size ).
<div class="col-md-4 col-sm-4">
<div class="product">
<a href="">
<img src="/media/{{ p.img }}" style="max-width: 100%;max-height: 100%;/> </a>
<div class="text">
<h3>Some text</h3>
</div>
</div>
#product img{
max-width: 100%;
max-height: 100%;
}
How can I resize the image to fit both, the 3 column grid and the 8 column with ( and keeping it responsive ).
Is it better to have two different images ? (one big and one small).
Use class="img-responsive" on the images.
http://getbootstrap.com/css/#images See the documentation for responsive images. The image will scale to the column size.
You should use the a format that fits in the larger column as images typically will scale down but become pixelated when scaling up.
The downside to using a large image in small slot is the larger the image typically the larger the file size and thus the slower to load, especially when dealing with mobile phones on 3g.

CSS image grid without clear columns

A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/

How can I get these links and images to appear inline

This seems so simple but I seem to be failing at it for some reason. So I have 3 images and each image has a link above it. I want them to appear inline and I can't use a table so I tried divs but they appear one after the other instead of inline. note: my page width is 1000px
<!-- First Div with link and image-->
<div style="float:left;width:33%">
BarTop Epoxy
<img style="margin: 15px;"src="image1" width="300" height="315">
</div>
<!-- Second Div with link and image-->
<div style="float:left;width:33%">
Countertop
<img style="margin: 15px;" src="image2" width="300" height="315">
</div>
<!--third Div with link and image-->
<div style="float:left;width:33%">
Flooring
<img style="margin: 15px;" src="image3" width="300" height="315">
</div>
There are two things you need to check:
That the DIVs are not clearing--they should have clear:none declared or inherited.
That there is enough space in your container for all of these items. Your floats contain elements 300 pixels wide with an extra 30 pixels of margin. Is your container 990px wide? Or even 660px wide? Floats will bump down to underneath the previous float if there is not enough room for them.
By default divs have a display: block; property, which means they will not appear on the same line.
You can fix this by making the display float, like you've done, but you should also add the styling clear: none; to be sure the floated elements are allowed to be side by side.
Alternatively, you could use display: inline-block;, which may work better for what you are trying to do, and here's a jsfiddle with this option.