I am trying to get my column padding closer together however I have padding set to 0 and theres still a gab in between. I want to make it so the columns are close to eachother no matter what screen sizer and theres 2 items per row. Doesnt even show the words of second row
<body>
</body>
<div class="pimg3">
<div class="row">
<div class="ptext">
<h1><strong>HOW I WORK</strong></h1>
<div class="column">
<i class="fas fa-search" style="color:#1d5ba0; padding: 10px"></i>
<h2>Research</h2>
<p>Understand the problem, empathize with the person. Explore the competitive landscape.
Identify strategic opportunities. Define design goals/requirements.</p>
</div>
<div class="column">
<i class="fas fa-flask" style="color:#1d5ba0; padding: 10px"></i>
<h2>Design</h2>
<p>Combine effective interfaces, smart interactions, and consistent visual language into
a captivating design that resonates with the target audience.
</p>
</div>
<div class="column">
<i class="fas fa-code" style="color:#1d5ba0; padding: 10px"></i>
<h2>Build</h2>
<p>Map design to code. Smooth constraints. Solve edge cases. Move that button 3 pixels to the left. Fill
the gap between functional and delightful.</p>
</div>
<div class="column">
<i class="fas fa-retweet" style="color:#1d5ba0; padding: 10px"></i>
<h2>Refine </h2>
<p>Test prototypes with real people against actual problems. Combine insights with gut intuition and experience.
Iterate and improve in pursuit of perfection.</p>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/kdb4raLx/1/
It could be due to your ptext seems that is a culprit
Related
I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.
There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html
When I look at my website "services" on an ipad landscape view, my services are going down one row. I have inspected the developer tools, and can see if I untick the bootstrap 33.3 %, each service will get 50%.
But I cannot see how I can get each one to fill 33.3%, when the bootstrap has defined it. I also defined how many col the div class should use. I looked through my CSS, and I do not have any padding, margin or so that should cause this.
<!-- begin services section -->
<section class="services">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-paper-plane-o"></i>
<h3>AutoPilotHQ</h3>
<p>
I startet to have quite some experience building quality leads through journeys and landingpages. I have made scripts that can be integrated with several platforms.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="service small">
<i class="fa fa-tablet"></i>
<h3>Mautic</h3>
<p>
I like the idea about open source marketing automation. I am currently working on different functions to generate and build more qulity leads.
</p>
</div>
</div>
</div>
</div>
</section>
CSS can be tricky.
The icon of service <i class="fa fa-paper-plane-o"></i> is set to float: left; and it brakes the layout.
Add this rule to fix it:
.service.small:after {
content: " ";
clear: both;
display: table;
}
Disabling the following CSS rule also repairs your layout (I am not sure why):
.services .service {
margin-bottom: 30px;
}
I am pretty new in Twitter BootStrap and I am going crazy trying to do the following thing related to this JSFiddle example: https://jsfiddle.net/AndreaNobili/DTcHh/11406/
So, in the previous example, I have this row:
<div class="col-md-4">
<div class="row">
<div class="col-md-10" style="text-align: right !important;">
<p>TEST</p>
</div>
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
So I correctly obtain a row that contains 2 columns: a bigest one on the left for the text and a smaller one on the right for an icon.
As you can see in the JSFiddle the problem is that I want to align the text on the right so I will have that it is near the icon but I can't do it.
As you can see I done:
<div class="col-md-10" style="text-align: right !important;">
but I still obtain that the text is on the left of its container.
Why? What am I missing? How can I fix this issue and align the text on the right near my icon?
This is why using !important is considered a bad practise and is to be avoided unless it's very important.
Your definition
.container p {
text-align: justify !important;
}
in index.css is taking precedence over all the styles. I would suggest removing the important from the above definition and making it more precise to apply to only certain dom elements as required(by using appropriate classes).
Regarding aligning it to the right, the other answer should work fine; i.e using the text-right class provided by Bootstrap.
<div class="col-md-4">
<div class="row">
<div class="col-md-10" style="text-align: right !important;padding-right: 0">
<p>TEST</p>
</div>
<div class="col-md-2" style="padding-left: 0">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
Just use Bootstrap's text-right..
<div class="col-md-4">
<div class="row">
<!-- CONTENT: -->
<div class="col-md-10 text-right">
TEST
</div>
<!-- ICONA: -->
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
http://codeply.com/go/ICgJMj82ue
first of all i want all i want to say that you need to improve of
using the sequences of the elements how to use them this can easily
solve your problems and make code very beautiful so people work even
you will love to when you need to come back to reuse
below is my try
This is why using !important is considered a bad practise and is to be avoided unless it's very important.
test{
float:left;
}
.test1{
line-height:30px;
}
<!-- Column 3: -->
<div class="col-md-4">
<div class="row">
<!-- ICONA: -->
<div class="col-md-2 test">
<i class="glyphicon glyphicon-home"></i>
</div>
<!-- CONTENT: -->
<div class="col-md-10 test1">
<p>TEST</p>
</div>
</div>
</div>
DEMO
<div class="col-md-10" style="text-align: right !important;">
<p class="text-right">TEST</p>
</div>
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
You don't need to use Bootstrap's columns (col-md-x, col-sm-x, col-lg-x) in your case, if you want to display two elements side by side.
Since the screen portion in JSfiddle is quite small on the right for the HTML, your column's (col-md-xs) will get a bigger width (due to #media queries of Twitter Bootstrap).
Thus, the two columns will get stacked onto each other.
You can align the text on the right of the icon, in a way quite similar to the one you already have, by using two HTML elements which are normally displayed inline:
<div class="row">
<!-- ICONA: -->
<div class="col-md-10">
<i class="glyphicon glyphicon-home"></i>
<span>HOME</span>
</div>
</div>
JSFiddle
I've been looking for a way to make my div be on top of all div's (covering them all). In fact i think i could solve this hiding the other div's but i think there should be another solution.
I'm using bootstrap to make a 3x3 grid. So, i have one row and inside it i have 9 div's with the class "col-md-4" (i just want this to work with this size.)
Z-position isn't working with me.
HTML
<div class="row ">
<div id="cube1" class="col-md-4 ">
<h1>The Company</h1>
<p><i class="fa fa-building-o fa-9x"></i></p>
</div>
<div id="cube2" class="col-md-4">
<h1>Our People</h1>
<p><i class="fa fa-heart fa-9x"></i></p>
</div>
<div id="cube3" class="col-md-4">
<h1>Code</h1>
<p><i class="fa fa-code fa-9x"></i></p>
</div>
<div id="cube4" class="col-md-4">
<h1>Our Brand</h1>
<p><i class="fa fa-barcode fa-9x"></i></p>
</div>
<div id="cube5" class="col-md-4">
<h1>Our Technology</h1>
<p><i class="fa fa-connectdevelop fa-9x"></i></p>
</div>
<div id="cube6" class="col-md-4">
<h1>What Moves Us</h1>
<p><i class="fa fa-cogs fa-9x"></i></p>
</div>
<div id="cube7" class="col-md-4 ">
<h1>Our Clients</h1>
<p><i class="fa fa-exclamation fa-9x"></i></p>
</div>
<div id="cube8" class="col-md-4">
<h1>Contact Us</h1>
<p><i class="fa fa-envelope-o fa-9x"></i></p>
</div>
<div id="cube9" class="col-md-4">
<h1>Address</h1>
<p><i class="fa fa-compass fa-9x"></i></p>
</div>
</div>
CSS
.row {
float: left;
height: 100%;
color: #fff;
width:calc(100% - 250px); /*250px is the size of left menu */
}
.cube {
height: calc(100%/3);
}
.teste {
z-index: 300 !important;
}
js
$(document).ready(function(){
var cores = Please.make_color({
base_color:'aliceblue',
colors_returned:9
})
cores[4]='#32BAD3';
for (i=0; i<10; i++)
{
$('#cube'+ (i+1)).css('background-color',cores[i])
}
$('.cube').click(function() {
$( this ).addClass( "teste", 1000, "easeOutBounce" );
$(this).width($('#rightmenu').width()-280);
$(this).height($('#rightmenu').height());
});
});
What i want to achieve is when a user click on one of the divs, it will expand covering all the viewport.
I read some posts here and they said that Z-index only work when i have a non-static non static positioning scheme. Can i consider that using the bootstrap classes "col-md-4" it makes my website a static scheme?
Sources:
CSS I want a div to be on top of everything
Z-Index with different parents
CSS Z-Index with Gradient Background
I have similiar problems with bootstrap but usually it has to do with the way css files are arranged in your site.
A dirty solution is
z-index: 300 !important;
to make sure other css rules get overwritten but I would avoid that when possible.
Where exactly did you put the z-index rules?
I am using Bootstrap and Font Awesome to make a table like the one from FAQ zalando.
So on the left side, there should be an icon, and on the right side, there should be text.
I want the text to be exactly under each other, they should not be out of alignment with each other. If I give the icons a span, then it will be ignored.
Here is my code:
<div class="row">
<i class="span2 icon-user "></i>
<div value='register' class="span4">
Registrierung
</div>
<i class="icon-mobile-phone span2"></i>
<div id='Newsletter' class="span4">
Newsletter
</div>
</div>
<div class="row">
<i class="icon-euro span2"></i>
<div value='kost' class="span4">
Kosten
</div>
<i class="icon-phone span2"></i>
<div id='probleme' class="span4">
Probleme
</div>
</div>
As an update to this, FontAwesome now has fixed-width support built in.
<i class="fa fa-fw fa-user"></i>
The fa-fw class supplies the fixed-width style.
Put your icon inside the element and make it behave as an inline-block so you can change its width and margin.
http://jsfiddle.net/LeBen/B9yjd/
Both, the original code of the Zalando website and the Fiddle by LeBen, are not "ideal" - espacially when it comes to HTML semantics.
Why having empty elements if you only want a background image for an element?
Just add the icon as background-image and set the padding-left for all these elements to the required value.
Just target the icons classes directly adding your styles in css:
[class*="btn-"]:before,
[class^=" btn"]:before {
margin-right: 1em;
}
And there's no need for an empty , just use:
<div class="row">
<div value='register' class="icon-user span4">
Registrierung
</div>
<div id='Newsletter' class="icon-mobile-phone span4">
Newsletter
</div>
</div>
just had this issue playing around with the options after not wanting to bang all my FontAwesome icons in spans/divs. Adding class 'fa-fw' did indeed solve it, but so does simply adjusting the width of the icon with CSS (maybe a new thing as this is an old post), so no extra classes needed if you have many icons. 'svg-inline--fa' was a common class for all my icons - see example
.item{
padding: 5px;
}
.svg-inline--fa{
font-size: 20px;
width: 40px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" defer></script>
<div class="item">
<i class="fas fa-bolt"></i>
Fast, local and friendly team
</div>
<div class="item">
<i class="fas fa-tags"></i>
Honest and transparent pricing
</div>
<div class="item">
<i class="fas fa-handshake"></i>
All our work is guaranteed
</div>
<div class="item">
<i class="fas fa-clipboard-check"></i>
Trained to the highest UK standards
</div>