I'm making a website in Bootstrap 4, but while creating one section I've ended up with the annoying white space on the right that causes unwanted horizontal scrolling.
Been playing with Inspector for ages, but can't figure out where's the problem.
Full code with the relevant section here: https://jsfiddle.net/dusset/aq9Laaew/284067/
<div class="row text-center text-light">
<div id="section-one" class="col mx-auto p-3 mb-5" style="max-width:720px;">
<h3 class="section-name text-white-50" data-aos="fade-in" data-aos-duration="250" data-aos-delay="250" data-aos-anchor="#section-one">O produkte</h3>
<h2 data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Preskúmajte nepreskúmané</h2>
<p class="font-weight-bold mt-5 larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Birthday Capsule je najoriginálnejší a najosobnejší narodeninový darček, aký môžte dať osobe, na ktorej Vám záleží.</p>
<p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Či je to babka, kamarátka alebo priateľ, život každého z nás má i nepreskúmanú stránku. Teda, donedávna nepreskúmanú…</p>
<p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Aký vek by mal na Marse? Koľkokrát sa už nadýchla? Čo iné je na dátume jeho narodenia výnimočné? To, i omnoho viac sme preskúmali, a dali do knižky, aby ste to mohli podarovať.</p>
</div>
</div>
Any help with removing it is much appreciated!
Your .row class has margin-left: -15px and margin-right: -15px. This is the cause of your problem.
Add this to your CSS and it's fixed:
.row {
margin:0px;
}
Here's an updated JSFiddle
If you don't want to override all row classes then add an id to the line below and add a CSS style for that independently.
<div id="something" class="row text-center text-light">
...
</div>
And the CSS:
#something {
margin:0px;
}
Use the "no-gutters" class with the offending "row". See: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
Check you external css files. might be there is a overlapped content beyond the edges.
Related
On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!
So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.
You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv
I don't really know how to explain what is happening. I have an image in my website that is normally showing when I'm editing my html and opening it through chrome (basically when it's not already online!). When I upload the document online the image is not showing anymore. I checked the folder and the connection, but it appears to be okay. Also, other elements from the same folder are working properly. Could you please help me?
this is the code:
<div id="purpleSection" class="row bg-purple fullScreen">
<div class="col-9 offset-3 d-flex align-items-center">
<p class="display-4 mr-2 line-height">Mi chiamo Giulia Giordano e vengo da Palermo. Attualmente sto
frequentando l’ultimo anno dell’Accademia di Belle Arti. Sono una graphic designer, mi occupo di visual
communication, design per l’editoria e videografica. Clicca per saperne di più! </p>
</div>
</div>
<div class="row bg-purple">
<div class="col-12 d-flex justify-content-end mb-5">
<a href="chisono.html" class="mr-5 mt-auto ">
<img src="scopridipiu/scopridipiù.png" alt="">
</a>
</div>
</div>
You are never closing your img tag, see if closing it helps by adding </img> or />
Also it might be an encoding issue. In this row.
<img src="scopridipiu/scopridipiù.png" alt=""></img>
Try changing your png file to something like scopridipiu.png instead of scopridipiù.png.
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm currently working on a website. I've looked through similar questions but haven't found a solution for my predicament. The changes I'm applying to external and even inline CSS are always being ignored when it comes to height. I can change the width of the div freely, however.
What's going on? What am I missing?
<div id="mainsection" style="height: 100%; width: 100%; border: 5px solid red; display: block;">
<!-- Header
============================================= -->
<header id="header" class="transparent-header style-1 dark no-sticky">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<img src="images/logo.png" alt="Brasillis Idiomas Logo">
<img src="images/logo.png" alt="Brasillis Idiomas Logo">
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="sub-title">
<ul >
<li><div>Home</div><span >Brasillis e você</span></li>
<li><div>Quem Somos</div><span >Desde 1992</span></li>
<li><div>Cursos</div><span >Idiomas e intérpretes</span></li>
<li><div>Serviços</div><span >Tradução e Transcrição</span></li>
<li><div>Contato</div><span >E informações</span></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="page-title" class="page-title-parallax page-title-dark page-title-center" style="background-image: url('images/fotos/BrasillisOficialEscuro.jpg'); background-size: cover; background-position: top center;" data-stellar-background-ratio="0.8">
<div class="container clearfix">
<h1 style="font-size: 3em;">Seja bem vindo ao Brasillis</h1>
<span>Milhares de alunos formados e eventos bem-sucedidos desde 1992</span>
</div>
</section>
<div class="clearfix col_full">
<div class="col_full common-height">
<div class="col-md-4 dark col-padding ohidden" style="background-color: #32587E; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">NOSSOS CURSOS</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Saiba mais
</div>
<i class="icon-comments bgicon"></i>
</div>
<div class="col-md-4 col-padding ohidden" style="background-color: #F1F1F1; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">NOSSOS SERVIÇOS</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Saiba mais
</div>
<i class="icon-briefcase bgicon"></i>
</div>
<div class="col-md-4 dark col-padding ohidden" style="background-color: #339933; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">PORTAL DO ALUNO</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Em breve
</div>
<i class="icon-user bgicon"></i>
</div>
</div>
</div>
</div>
First: If you want no one to get your code, you cannot post your website online. Once you uploaded it, everyone can get your code.
So let me answer your question. Have you thought about what the 100% means?
If you put more input inside the container ,the complete height will change, actually the paramter height can be higher than your viewport height.
You want "100%" of viewport height, so use "100vh" instead of "100%" !
height: 100vh;
So far I can see is that you used height:100%. This doen't work, I'm not sure why not, but I have a solustion for you.
You can use height:100vh;
vh means: view height, so this means it will take the height of the screen that you are watching it on.
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>