I'm working on a webpage at the moment that needs to be responsive for mobile devices. I have linked 2 images of how it looks right now, 1 for the normal design and 1 for how it looks on mobile right now. What I want to change, but don't know-how, is the colored padding. As you can see, there's a space between the icon above and the image under it, that white space I want to get rid of, either fill it with the same color or make the padding so that covers it up. Of course, I want the pc screen version to remain how it is on the image. Does anyone know a solution for this?
Mobile image: https://imgur.com/a/lG6w3mi
Web image: https://imgur.com/a/JqPV7Lo
This is the code of the block that I am talking about, sorry for not including that earlier.
<div class="col-md-4"
style=" width: 365px; background-color: #D7E1F8; padding-bottom: 141px; padding-left: 100px;">
<h1 class="icontextlb"> <br><br><br>
<i class="icon-email iconstylelb"></i>
<br>
2014
</h1>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 65px;">
<br><br><br><img src="images/verhaal/kraan.png"/>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 248.8px; padding-top: 20px;">
<h1><br>
Koppeling met web en de fabriek
</h1>
<p>
In 2014 was de koppeling met de website en de
fabriek klaar. Dit betekend dat de orders
automatisch verstuurd worden naar de fabriek. De
orders worden hierdoor sneller doorgevoerd en de
klant heeft eerder zijn glas op maat.
</p>
</div>
As you can see, I have 3 different paddings right here, for the image, icon, and text. It would be easier, I think, if it was just 1 bit of padding or a background color, instead of 3 separate parts that need adjusting.
Padding actually is not the issue here. The issue with the white space is because you are using a fixed width on your first col-md-4. Bootstrap is already responsive in it self, so setting fixed widths will not help it out at all. The col-md-4 already has a width associated width it md-4. I would suggest removing the fixed width and letting it revert back to its default of width: 100%; so it can use all of its column width.
Side Note: While the br element is great, Bootstrap columns are designed to break each div into sections, so the extra br's and padding's are a bit unnecessary, especially when using the Bootstrap framework. Lastly, I added a container and a row for good measures, it appears based on your web image you were already using a row.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-4"
style="background-color: #D7E1F8; padding-bottom: 141px; padding-left: 100px;">
<h1 class="icontextlb"> <br><br><br>
<i class="icon-email iconstylelb"></i>
<br>
2014
</h1>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 65px;">
<br><br><br><img src="https://dummyimage.com/400x400/000/fff"/>
</div>
<div class="col-md-4" style="background-color: #D7E1F8; padding-bottom: 248.8px; padding-top: 20px;">
<h1><br>
Koppeling met web en de fabriek
</h1>
<p>
In 2014 was de koppeling met de website en de
fabriek klaar. Dit betekend dat de orders
automatisch verstuurd worden naar de fabriek. De
orders worden hierdoor sneller doorgevoerd en de
klant heeft eerder zijn glas op maat.
</p>
</div>
</div>
</div>
Related
I am new to Bootstrap 3 and I would like to have 3 panels on my landing page of equal height, even though the middle panel has less content. When resized they become the same height, but are not upon initial visit to the page.
I already tried hiding the overflow with CSS and it cuts off the bottom of the panel which isn't what I want, so I'm thinking I need to use jQuery.
Here is my code:
<div class="row-fluid">
<!--begin panel 1 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title text-center">Web y Metrícas</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
</p>
<p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
<ul class="text-left">
<li>Web Corporativas</li>
<li>Tiendas Virtuales</li>
<li>Plataformas e-Learning</li>
<li>Arquitectura de Información</li>
<li>Google Analytics, SEO–SEM</li>
<li>Análisis de Competencia Digital</li>
<li>Data Mining</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!--end col-md-4 -->
<!-- begin panel 2 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Gestíon de Redes Socials</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
</p>
<p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
<ul class="text-left">
<li>Compromiso</li>
<li>Publicación</li>
<li>Monitoreo</li>
<li>Analítica</li>
<li>Colaboración</li>
<li>CRM</li>
<li>Movil</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
<!--begin panel 3 -->
<div class="col-md-4">
<div style="text-align:center" class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Plan de Medios</h1>
</div>
<!-- end panel-heading -->
<div class="panel-body">
<p>
<img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
</p>
<p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
<ul class="text-left">
<li>Asesoría Comunicacional</li>
<li>RR.PP</li>
<li>Presencia de Marca</li>
<li>Clipping Digital</li>
<li>Manejo de Crisis</li>
<li>Lobby</li>
<li>Media Training</li>
</ul> <a class="btn btn-primary" href="#">Ver más »</a>
</div>
<!-- end panel-body -->
</div>
<!-- end panel-primary -->
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
This can be done with CSS flexbox. Only minimal CSS is needed..
.equal {
display: -webkit-flex;
display: flex;
}
Just add .equal to your .row and flexbox does the rest.
http://www.codeply.com/go/BZA25rTY45
UPDATE: Bootstrap 4 uses flexbox so there is no need for the additional CSS.
http://www.codeply.com/go/0Aq0p6IcHs
Bootstrap's solution - add this css and add the class to your row:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
It has a couple caveats, as posted at http://getbootstrap.com.vn/examples/equal-height-columns/, but it sounds like it'll be good enough for your case.
I also saw this answer here.
Update for dynamic number of columns
Bootstrap automatically wraps columns into new rows when you add more than can fit in one row, but this flexbox approach breaks this. To get flexbox to wrap, I've found you can do something like this:
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
This is awesome when you have a dynamic number of columns, or columns that change width according to the screen size. So you can have something like this:
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
<div class="col-sm-6 col-md-4">Content...</div>
</div>
And it all lines up the way it's expected. Just watch out - it only works in newer browsers. More info here
If you're going to use the bootstrap grid, I don't think you're going to find an easy way to accomplish this without hacks like the following css.
This basically says. When the screen width is greater than the md breakpoint in bootstrap, give all the elements with panel-body class which are direct descendants of the column elements a minimum height of 420px which happens to be a "magic number" that works with your existing content.
Again, I think this is a really gross solution, but it "works" in a pinch.
#media (min-width: 992px) {
.col-md-4 > .panel > .panel-body {
min-height: 420px;
}
}
Here's a CSS-Tricks article Fluid Width Equal Height Columns which covers various ways (display: table & flexbox) to accomplish this. However, you might need to step away from the responsive bootstrap grid for this particular task.
Also, here's the Complete Guide to Flexbox
Haven't found any of these CSS methods to work in my case I am using images in my panels too instead I used a simple JQuery function to get the job done
window.onload = function resizePanel(){
var h = $("#panel-2").height();
$("#panel-1").height(h); // add a line like this for each panel you want to resize
}
Where the ids "panel-1" and and "panel-2" are in the panel tag choose the largest panel as the one you use to set h and call the function at the end of you html.
<body onresize = "resizePanel()">
I also make it so the function is called when if the window is resized by adding the onresize attribute to the body
this function finds the largest .panel-body height, then makes that the height of all my .panel-body elements.
function evenpanels() {
var heights = []; // make an array
$(".panel-body").each(function(){ // copy the height of each
heights.push($(this).height()); // element to the array
});
heights.sort(function(a, b){return b - a}); // sort the array high to low
var minh = heights[0]; // take the highest number
$(".panel-body").height(minh); // and apply that to each element
}
Now that all the panel-bodys are the same, the heights need to be cleared when the window resizes before running the "evenpanels" function again.
$(window).resize(function () {
$(".panel-body").each(function(){
$(this).css('height',""); // clear height values
});
evenpanels();
});
I add top and bottom paddings in style for the lower <div>.
<div class="xxx" style="padding: 8px 0px 8px 0px">
...
</div>
Because after all each case is different and you have to adjust according to the situation.
Chrome dev tool can be very useful in situations like this.
Hey I am confused since I am trying to center a paragraph for instance it wont do anything i tried text-align, align center, inline block and so on.
HTML `
<div class="col-md-6 col-sm-12 picText1">
<p style="background-color:#77b97a;" class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>`
CSS
.picText{
color: black;
border-radius: 20px 20px 20px 20px;
width: 150%;
height: 75px;
padding-top: 2%;
position: relative;
text-align: center;
left: 26%;
}
I also tried using bootstrap command with no luck hope someone can clarify since it works sometimes with text align and so on, but i have put borders around it seems like it wont do anything
You won't need the positioning styles to get the paragraph centered. You can simply specify the width of the element, and then set its margins to 0 auto which will give it 0 margin for top and bottom, and will automatically use the correct left and right margins to make the element centered given its box model and the width of its parent container.
.container {
width: 100%;
}
.picText {
background-color: #77b97a;
border-radius: 20px 20px 20px 20px;
padding: 2%;
text-align: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<p class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>
Using bootstrap, I used a container and centered it using justify-content-center which is simpler than writing css rules in my opinion. You could add your image inside the container and they both will be centered.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container col-md-6 justify-content-center w-50">
<p class="bg-info rounded-lg p-2 mt-3">
Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.
</p>
</div>
My current situation is like this: http://i.imgur.com/qq15FEK.png
I have a panel, where the heading and border are the same color. I've overwritten the panel-info default color to use my own.
My problem is the small white gap between the heading and the border. I've tried changing the padding and border styles, but to no avail.
How do I make the heading take up the whole space of the panel, so as to remove the gap that appears?
/* This is the CSS that overrides the default bootstrap panel. */
.panel-info>.panel-heading {
color: #000 !important;
background-color: #6fc45b !important;
}
.panel-info {
border-color: #6fc45b !important;
}
<div class="col-sm-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Lejeperiode</h3>
</div>
<div class="panel-body">
Højsæson er skolernes vinterferie, sommerferie samt efterårsferie. I disse uger trækkes der lod. I højsæsonen kan man ikke booke weekender, med mindre de er ledige. I lavsæsonen kan man leje hele ugen, weekender samt mandag til torsdag. Weekender samt
mandag til torsdag bekræftes først en måned inden, da de altid kan overgåes af udlejning af hele ugen.
</div>
</div>
</div>
Try
.panel-heading {
margin-right:-1px;
margin-left:-1px;
}
im working on a project for myself and im stuck at this point:
<div id="opacity">
<div id="content">
<div id="text">
<h1 id="contentH1">Officiele game-rate website.</h1>
<br>
<p id="contentP1">Op deze website kunt u alle top 10 games zien, van veel verschillende genre's. Alle lijsten zijn bedoeld voor de pc. </p>
<p id="contentP2">Hier onder worden de verschillende genre's aangegeven:</p>
<ul id="genreIndeling">
<li>Actie</li>
<li>Avontuur</li>
<li>Strategie</li>
<li>RPG</li>
<li>Sport</li>
<li>Race</li>
</ul>
</div><!--END TEXT-->
</div><!--END OPACITY-->
<div id="messi">
<img id="messi" src="messi.png" alt="Messi" style="opacity: 1;">
</div><!--END MESSI-->
</div><!--END CONTENT-->
Sorry for the Dutch words, but the problem is that my pc, the end div of "content" sees as the end div of "opacity", so my picture got still opacity.
Can anybody help me please?
Thanks,
Joost Keizer
You are missing a closing "/div" for opacity
Swap the ids of your first two divs:
<div id="content">
<div id="opacity">
This will put your divs in order and keep the image the way you want.
I'm leaning bootstrap, and I made this a row with two columns to stack each other.
On the large devices i want it to be like that:
With the trophy a little to the top, as you can see.
But in mobile small and medium it's like that:
As you can see, the trophy isn't centered under the black div, it's possible to center it just when the columns stack each other?
html:
<div class='row'>
<div class='subir col-lg-6 col-lg-offset-1'>
<div>
<p class='titulo'>Liga Juizforana</p>
<hr size='1' align='left'>
<p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
</div>
</div>
<div class='grandelogo col-xs-3 col-md-3 col-lg-4'>
<img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
</div>
</div>
you could try this CSS:
#media (max-width: 767px) {
.grandelogo {
text-align:center;
}
}
Change the actual width according to your needs
I can't see any centering element. To center it in a div, just put text-center class in a div.grandelogo classes, that is a supported way to do it in bootstrap.
If you want to have it 100% width in small devices, help yourself with col-sm or col-md settings:
<div class='row'>
<div class='subir col-sm-12 col-lg-6 col-lg-offset-1'>
<div>
<p class='titulo'>Liga Juizforana</p>
<hr size='1' align='left'>
<p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
</div>
</div>
<div class='grandelogo col-sm-12 col-lg-4 text-center'>
<img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
</div>
</div>