There is some margin to the right of the page, seemingly outside of the body itself (seen from inspecting in browser), which also causes a scrolling bar to appear on the bottom, but i can't understand what causes it.
I linked on both codepen and netlify
Codepen:
https://codepen.io/bladeranner5005/pen/QWObNpZ
Netlify:
https://lucid-kalam-398350.netlify.app
html
<!doctype html>
<html lang="it">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400&family=Libre+Franklin:wght#800&display=swap"
rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Icons links-->
<!--Custom css-->
<link href="css/index-css.css" rel="stylesheet">
<title>Andrea D'Angelo-website</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active nav-link-custom nav-item-spacing" href="index.html">Home</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/curriculum.html">Curriculum</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/portfolio.html">Portfolio</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/contacts.html">Contatti</a>
</div>
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section class="screen-height">
<div class="container-fluid h-100 d-inline-block">
<div class="top-logo"></div>
<div class="row d-flex justify-content-center align-items-center" id="animation">
<div class="col-4">
<img src="img/index/home-logo.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section class="background-black screen-height-curriculum">
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="cur-buffer-top col-1"></div>
</div>
<!--TEXT 1-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Sono un designer</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 2-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 3-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho lavorato a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="cur-buffer-mid 1 col-1"></div>
</div>
<!--TEXT 4-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="cur-buffer-mid">
</div>
</div>
</div>
<!--BUTTONS (DARK BACKGROUND)-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/curriculum-pdf.pdf" class="link-btn btn btn-dark w-100">Curriculum<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section>
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-3"></div>
<div class="col-6 text-center">
<h1 class="work-text-title">My work</h1>
</div>
<div class="col-3"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Pastichair/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Pastichair</h2>
</div>
<div class="col-4"></div>
</div>
<!--Pastichair/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Lavoro di design di scenario in cui abbiamo interagito con la
cooperativa torinese Triciclo, dovendo proporre nuovi scenari per migliorare le prestazioni
della cooperativa sia creare un nuovo modello di prodotto che facilmente replicabile dai membri
di Triciclo, in particolare concentrandosi su un tipo di sedia assegnata a inizio progetto.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Beb/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Bella e brava</h2>
</div>
<div class="col-4"></div>
</div>
<!--beb/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Progetto di creazione di un video animato di 45 secondi avente come
protagonista un prodotto di packaging pre selezionato, tramite lo strumento video e le tecniche
di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione,
con l’evidenza dei particolari motivi dell’essere ecologicamente sostenibile.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Personal space/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Personal space</h2>
</div>
<div class="col-4"></div>
</div>
<!--Personal space/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Un progetto di social design, ci è stato dato il compito di creare un
ipotetico progetto riguardante un tema sociale circoscritto a Torino. Abbiamo deciso di
dedicarci al tema delle neuro divergenze nelle scuole, in particolare l’autismo. Abbiamo creato
un’attività la quale punta a facilitare l’interazione fra bambini neuro divergenti e non, la
quale poi si sarebbe sviluppata con un’interazione online con i genitori.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</div>
<!--BUTTONS-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/portfolio-pdf.pdf" class="link-btn-light btn btn-light w-100">Portfolio<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Info</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="info-buffer">
</div>
</div>
<!--Info wrap-->
<div class="row">
<!--DATA-->
<div class="col-12 col-sm-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-sm-2 col-md-3"></div>
<div class="col-8">
<div class="container-fluid0">
<div class="row">
<div class="col-12 text-center">
<h3 class="info-text-title">Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Nazionalità</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Italiana</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Data di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">08/04/2000</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Luogo di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Caserta</p>
</div>
</div>
<div class="row">
<div class="col-4 text-start">
<p class="info-text-red">Email</p>
</div>
<div class="col-8 text-end">
<p class="info-text-normal">emailexemple#gmail</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Telefono</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">0000000000</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--BUTTON-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger mt-5"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Home<br>page
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
</body>
</html>
CSS
/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/
/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
padding-top: 55px;
margin: 0;
}
/*To make internal links selection better:*/
html {
scroll-behavior: smooth;
}
/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/
/*Tags from google fonts
Josefin sans light:
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
Josefin sans regular:
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/
/*NAVBAR -------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.nav-item-spacing {
margin-left: 30px;
margin-right: 30px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Colors --*/
.background-black {
background-color: black;
}
.nav-link-custom {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
font-size: 1vw;
}
/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height {
height: 100vh;
}
.top-logo {
height: 13vh;
}
#media (max-width: 768px) {
.top-logo {
height: 30vh;
}
}
#animation {
animation: animation 2s;
}
#keyframes animation {
from {
transform: translateY(60vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height-curriculum {
height: 100vh;
}
#media (max-width: 768px) {
.screen-height-curriculum {
height: 110vh;
}
}
.cur-buffer-mid {
height: 10vh;
}
#media (max-width: 768px) {
.cur-buffer-mid {
height: 6vh;
}
}
.cur-buffer-top {
height: 8vh;
}
/*Text --*/
.home-cur-text {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: white;
text-align: center;
}
/*Button --*/
.link-btn {
border-style: solid;
border-width: thick;
border-color: white;
background-color: black;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*MY WORK ------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.work-buffer {
height: 10vh;
}
/*Text --*/
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 36pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 42pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 18pt;
}
}
/*Button --*/
.link-btn-light {
border-style: solid;
border-width: thick;
border-color: black;
background-color: white;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*INFO ---------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.info-buffer {
height: 10vh;
}
.info-buffer-button {
height: 15vh;
}
/*Text --*/
/*
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
*/
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 36pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 18pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 3vmin;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 4vmin;
}
}
I'm not finding the culprit immediately after checking your codepen, but a quick and dirty way to hide any side to side scrolling is by using
body {
overflow-x: hidden;
}
It's caused by the margins of your middle logo, #animation. Setting --bs-gutter-x to 0 seems to fix it.
fix this in grid:
.row {
--bs-gutter-x: 0;
}
or add this style:
body {
width: 100vw;
overflow-x: hidden;
}
It looks like it's an issue with the div under the <!--SPACING 6--> comment in the My Work section. Remove class="row" from this div, and this'll fix the issue. Here's an example:
<!--SPACING 6-->
<div>
<div class="work-buffer">
</div>
</div>
I also noticed that the work-buffer class is only added for spacing. A better way of doing this would be to get rid of this div all together and add padding-bottom to the <section> tag containing the "My Work" content instead.
Related
The thing that I am trying to do is: image
The problem in my code is, I am using bootsrap grid system to achieve this easily but when I put this two text and image in a grid system(rows and columns), they look like this: problematic image. How can I achieve the look in the first photograph I put? Also, I want my website to be responsive. So, please write an answer accordingly. Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Own CSS-->
<link rel="stylesheet" href="stayil.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght#300;400;600;700&display=swap"
rel="stylesheet">
<title>Bati Gozen</title>
</head>
<body>
<!-- Navbar -->
<header id="home">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#mywork">My Work</a>
<a class="nav-link" href="#resume">CV</a>
</div>
</div>
</div>
</nav>
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="images/IMG_0109.jpg" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-6">
<div class="col-6"><img class="img-fluid ib" src="images/ibimag.png" alt="IB"></div>
</div>
<div class="col-6 m-auto">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<!-- Photo Gallery -->
<section id="mywork">
<h3>My Work</h3>
<div class="continer-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/2.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/3.jpg" alt="Certificate" class="basari">
</div>
</div>
<div class="row paddingekle">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/5.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/6.jpg" alt="Certificate" class="basari">
</div>
</div>
</div>
</section>
<!-- Resume -->
<section id="resume">
<h3>My Resume</h3>
<button class="btn btn-lg btn-light">
<i class="far fa-file-pdf"></i> Download
</button>
</section>
<!-- Bootsrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>
CSS:
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
.navbar-brand,
.nav-link {
color: #555555;
}
.navbar-brand {
margin-left: 10px;
}
.navbar-brand:hover,
.nav-link:hover {
color: black;
}
Because you want these elements grouped closely, it makes sense to nest them in the same parent and use flex only on that parent.
Instead of making them in two different .col's. Try putting them in the same one and use .d-flex with .align-items-center and .justify-content-center classes on that parent. You can then use .gap-3 for 1rem of gap betwen the two elements.
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="https://dummyimage.com/100/000/fff" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center gap-3">
<img class="img-fluid ib" src="https://dummyimage.com/100/000/fff" alt="IB">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</div>
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
I've just got back in to learning bootstrap, html and css. So far I have three cards in a row of different widths using the bootstrap grid the horizontal card template. My problem is that I want my layout to be the same in each card, The title and paragraph should be the same distance away in each and the fav / info button the same distance from the title. Also, I managed to get the first two columns close but somehow there is weird extra large spacing between the image and title of the last and largest column. How can I do this?
I've tried to manually adjust the positions of the elements in each card but it's hard to get them consistent, it also made my code a mess with extra ids for very similar things. As for the odd spacing I've tried to find the issue using developer tools on chrome to change the width, padding etc but not sure what is causing this. The columns I have are col-md-3, col-md-4 and col-md-5.
these are my cards
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>"
<div class="col-md-4">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">The Rising of the Shield Hero</h5>
<p class="card-text">Airs Wednesday :: 26 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5>
<p class="card-text">Airs Saturday :: 12 eps</p>
<div class="status"></div>
</div>
</div>
</div>
I also added it to my codepen to better see also https://codepen.io/Shiro01/pen/YbRQmQ
I'm trying to get them similar to the cards on this site https://anichart.net/airing
I want to have the column fit the content and don't want the title breaking on to another line. I want the distance of the elements to be as equally spaced as possible so the whole design looks consistent. Thank you.
remove that class=" no-gutters" , and add class="container-fluid" before row
not try to edit boostrap class it destroy its responsive structure
And your stutus bar can adjust with position absolute or change your style
status {
background-color: #662481;
height: 76px;
width: 10px;
position: relative;
left: 187px;
top: -103px;
margin: 0;
padding: 0;code here
<div class="row outer_row">
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row inside_row">
<div class="col-sm-4">
<div class="img-container">
<img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-sm-6">
<div class="card-data">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
</div>
</div>
<div class="col-sm-2">
<div class="status"></div>
</div>
</div>
</div>
here is css for HTML code :
body {
padding: 70px;
}
.card-img-top {
width: 100%;
margin-left: -15px;
height: 80px;
}
.status {
background-color: #662481;
height: 80px;
width: 10px;
}
.card-data{
margin-left:-30px;
margin-top:6px;
}
.inside_row{
width: 100%;
border:1px solid lightgray;
height:80px;
}
.outer_row{
width: 100%;
}
here is my solution for your question in a codepen https://codepen.io/nick4434/pen/joQGVM?editors=1100
please try this code:
body {
padding: 70px;
font-family: arial, helvetica;
background-color: #ebebeb;
}
.navbar {
background-color: #fff;
}
.navbar-brand {
color: #2980b9; /* Clips image */
font-size: 20px;
font-weight: bold;
}
.nav-link {
color: #2980b9;
}
.mb-3 {
max-height: 100px;
}
.md-3 {
max-width: auto;
}
.card-title {
font-size: 16px;
font-weight: bold;
margin-top: -10px;
margin-bottom: 2px;
margin-left: -10px;
}
.card-text {
margin-top: -4px;
margin-bottom: 40px;
margin-left: -10px;
font-size: 12px;
}
/* Clips image */
.img-container {
display: inline-block;
width: 100px;
height: 100px;
overflow: hidden;
}
.card-img-top {
position: relative; top: 50%;
transform: translateY(-35%);
}
.status {
background-color: #662481;
height: 100px;
width: 10px;
position: relative;
top: -96px;
margin-left: auto;
z-index: 99;
padding: 0;
right: -20px;
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="assets/font/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="index-css-mini.css">
<title>AniWatch</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-md fixed-top">
Brand
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
Airing
Finished
</div>
</div>
</nav>
</div> <!-- nav container -->
<div class="row">
<div class="col-md-3">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1517/100633l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Attack on Titan</h5>
<p class="card-text">Airs Sunday :: 10 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1068/97169l.jpg" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">The Rising of the Shield Hero</h5>
<p class="card-text">Airs Wednesday :: 26 eps</p>
<div class="status"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-3">
<div class="img-container"><img src="https://cdn.myanimelist.net/images/anime/1130/99458l.jpg" class="card-img-top" class="card-img-top" class="card-img" alt="..."></div>
</div>
<div class="col-md-9">
<div class="card-body">
<h5 class="card-title">Hitori Bocchi no Maru Maru Seikatsu</h5>
<p class="card-text">Airs Saturday :: 12 eps</p>
<div class="status"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm building a complex table and having some issues with responsiveness and being able to align all the columns in a row to have the same height depending on how much content is inside a certain row.
Please run the code in full page (1100px +) since mobile responsiveness is not completed yet
Here is the JSFiddle: http://jsfiddle.net/fLr9th4y/2/ - Please reference to #11 in the table to view an example.
Here is the code:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>
</html>
Just restructure your html. You having the row and inside you need to have your columns (each is col-md-3 if I see it right, but that's not so important). You can also use css-grid for it: https://css-tricks.com/snippets/css/complete-guide-grid/
I believe you are approaching it wrong way. You should refactor your HTML structure base on row instead of column, it will be easier to make it responsive. You should customize slick function to make it work instead of working arround with CSS
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row bg-fhdark">
<div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
TEST TEST</span>
</div>
<div class="col-sm-4 bl">11</div>
<div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-sm-4 bl">12</div>
<div class="col-sm-4 bl">12</div>
</div>
So it seems it's a typical problem, but I haven't been able to remove that bloody blank space that completely disfigures my webpage on mobile view.
I have tried to remove individually each element to see what's happening, but I can't see it.
HTML code:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<!--Boostrap jQuery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!--Boostrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!--Favicon-->
<link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
<!--Mi CSS-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<title> TRAMA & DRAMA | Vestuario y producción</title>
</head>
<body>
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div class="row ">
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div class="row">
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="row text-center">
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
<!--Bootstrap jQuery-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
CSS code:
/*Fuentes*/
#import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
#import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
#import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
body{
padding-top: 70px;
overflow: hidden
}
footer{
background-color: #B7254E;
color: white;
}
/*Los botones dentro de una font: ;ma*/
form > button{
width: 50%;
background-color: #5A1741 !important;
text-align: left !important;
}
/*ids*/
#copyrights{
padding-top: 25px;
}
#futer{
padding-top: 25px;
padding-bottom: 25px;
}
#textfield{
height: 150px;
}
#proyectos{
background-color: #5A1741;
color: white;
}
#id-quienes{
color: white;
background-color: #5A1741;
padding-top: 10px;
padding-bottom: 10px;
}
#imagen-fondo{
position: relative;;
z-index: -1;
}
#logo{
width: 13em;
}
#contacto-desc{
color: #692C52;
font-weight: bold;
}
#pasion-div{
background-image: url("media/portada-mejor.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 650px;
padding: 13px;
font-size: 1.2em;
/*Para que se centre el texto*/
display: table;
width: 100%;
}
#pasion-div > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
#pasion-texto{
font-family: 'Lora', serif;
color: white;
font-size: 5em;
/*width: 400px;*/
}
#quienes{
background-color: #5A1741;
height: 200px;
}
/*clases*/
.ch{
font-weight: bold;
color: #5A1741;
}
.cs{
color: #5A1741;
color: #B7254E;
}
.navbar-nav{
background-color: white;
font-weight: bold;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
color: #B7254E;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.navbar a{
color: #B7254E !important;
}
.barraRosa-nav{
width: 100%;
height: 45px;
background-color: #B7254E;
}
.barraRosa{
width: 100%;
height: 5px;
background-color: #B7254E;
}
.barraRosa-negra{
width: 100%;
height: 5px;
background-color: #5A1741
}
.hacemos-descripciones{
color: #B7254E;
}
.hacemos-headers{
color: #5A1741;
}
.fuente-merri{
font-family: 'Merriweather', serif;
}
.fuente-sans{
font-family: 'Open Sans', sans-serif;
}
/*Posicionar verticalmente en el centro*/
.vertical-align {
vertical-align: middle;
display: inline-block;
}
.form-group > input{
width: 50%;
}
Try this:
body {
overflow-x: hidden;
}
Try to add
html, body { margin: 0; }
I think you used to much class="row" even if there is no child columns.
for example you did this
<!--Sldeshow -->
<div class="container-fluid">
<div class="row "> /*remove this class="row" because you're not using col*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
and it should be like this
<!--Sldeshow -->
<div class="container-fluid">
<div> /*yep, this is right*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
so why removing the class row?
if you look at bootstrap.css you can see the .row have margin: 0 -15px, so why is that?
so that it can remove the excess 15px of the col-xx-00 class.
So try removing the class='row' that occupies the unnecessary white spaces.
here, i tried to remove the unnecessary rows.
<!-- navbar -->
<nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>¿Quiénes somos?</li>
<li>¿Qué hacemos?</li>
<li>
<img id="logo" src="media/logo-menu.png" alt="">
</li>
<li>Nuestros proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
<!--fin del navbar-->
<!--Barra rosa única del navbar-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-nav"></div>
</div>
</div>
<!--Sldeshow -->
<div class="container-fluid">
<div> /*removed class="row" here*/
<div id="pasion-div">
<div class="text-center">
<h1 id="pasion-texto">Pasión por el vestuario</h1>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center img-responsive" id="id-quienes">
<img id="img-vestido" src="media/vestido.png" alt="Vestido">
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans" id="hacemos">
<h1>¿Qué hacemos?</h1>
</div>
</div>
<br>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-renta.png" alt="">
<p class="hacemos-headers"><b>Renta de vestuario</b></p>
<!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
</div>
<div class="col-sm-4">
<img src="media/icono-coordinacion.png" alt="">
<p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
</div>
<div class="row">
<img src="media/icono-diseno.png" alt="">
<p class="hacemos-headers"><b>Diseño de vestuario</b></p>
</div>
</div>
<div class="row text-center fuente-merri">
<div class="col-sm-4">
<img src="media/icono-espacios.png" alt="">
<p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
</div>
<div class="col-sm-4">
<img src="media/icono-realizacion.png" alt="">
<p class="hacemos-headers"><b>Realización</b></p>
</div>
<div> /*removed class="row" here*/
<img src="media/icono-mantenimiento.png" alt="">
<p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div id="proyectos">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Nuestros proyectos</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
</div>
</div>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-4">
<img src="media/circ-1.png" alt="">
<h4>Diseño de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-2.png" alt="">
<h4>Producción y coordinación de vestuario</h4>
</div>
<div class="col-sm-4">
<img src="media/circ-3.png" alt="">
<h4>Renta de vestuario</h4>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row text-center fuente-sans">
<div class="col-sm-6">
<img src="media/circ-4.png" alt="">
<h4>Servicio social</h4>
</div>
<div class="col-sm-6">
<img src="media/circ-5.png" alt="">
<h4>Actividades del mes</h4>
</div>
</div>
</div>
</div>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center fuente-sans">
<h1>Contacto</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12 text-center fuente-merri">
<div id="contacto-desc">
<p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
</div>
</div>
</div>
<div class="text-center"> /*removed class="row" here*/
<form role="form">
<div class="form-group">
<input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
</div>
<div class="form-group">
<input type="email" name="" value="" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
</div>
<button type="button" class="btn btn-primary">ENVIAR</button>
</form>
</div>
<br>
<div class="row text-center fuente-merri">
<p class="ch">Teléfonos</p>
<p class="cs">044 55 5601 1231</p>
<br>
<p class="ch">Correo eletrónico</p>
<p class="cs">info#tramaydrama.mx</p>
<br>
<p class="ch">Dirección</p>
<p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
</div>
</div>
<br>
<!--Barra rosa-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 barraRosa-negra"></div>
</div>
</div>
<!--Footer-->
<footer>
<div class="container">
<div class="row fuente-sans">
<div class="col-sm-12 text-center" id="futer">
<a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
<img src="media/icono-inst.png" alt="Instagram">
<img src="media/icono-vimeo.png" alt="vimeo">
<p id="copyrights">Copyright Trama & Drama 2016 ©. Todos los derechos reservados | Página web por <a target="_blank"
href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
</div>
</div>
</div>
</footer>
or if you want, instead of removing rows, add col-sm-12 to the following tag. For example <div class="row"><div class="col-sm-12"><p>hey~</p></div></div>