CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3responsive-design
kxz
kxz

Reputation: 63

Issue with website responsive design

I am trying to create a responsive website using bootstrap and am having trouble with making my about section does not go past the given area (the dark gray), here is an example of when browser is downsized and also the hero's font when downsized or viewed on a mobile overlaps the face of the picture, however I am not sure on how about doing it.

body,
html {
    height: 100%;
    font-size: 100%;
}
.cd-fixed-bg {
    font-family: 'Open Sans', sans-serif;
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}
.cd-scrolling-bg {
    min-height: 60%;
}
.cd-fixed-bg.cd-bg-1 {
    background-image: url("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
}
.cd-scrolling-bg.cd-color-1 {
    height: 60%;
    background-color: #212121;
    color: #fff;
}
.cd-intro {
    color: #212121;
    position: absolute;
    top: 40%;
    bottom: auto;
    right: auto;
    padding-left: 15%;
    text-align: left;
    max-height: 70%;
}
.cd-intro-dec-1 {
    font-weight: 300;
    font-size: 48px;
}
.cd-intro-dec-2 {
    font-weight: 400;
    font-size: 72px;
}

.cd-content-format {
    font-family: 'Open Sans', sans-serif;
}

.header-about {
    font-weight: 300;
    font-size: 60px;
}

.about-sub {
    font-weight: 700;
    font-size: 18px;
}

.about-content {
    font-weight: 400;
}

.about-img-adjust {
    padding-top: 20px;
    padding-bottom: 10px;
}

.about-quote {
    font-weight: 300;
    font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tribute Page</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <div class="cd-fixed-bg cd-bg-1">
        <div class="cd-intro">
            <h1 class="cd-intro-dec-1">a tribute to</h1>
            <h2 class="cd-intro-dec-2">Steve Jobs</h2>
        </div>
    </div>

    <div class="cd-scrolling-bg cd-color-1">
        <div class="container cd-content-format">
            <div class="row">
                <div class="col-xs-6 col-md-4">
                    <img src="http://i.imgur.com/w39VG2S.jpg" class="about-img-adjust img-responsive" alt="Steve Jobs">
                    <blockquote class="blockquote about-quote">"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote>
                </div>
                <div class="col-xs-12 col-md-8">
                    <h1 class="header-about">about</h1>
                    <p class="about-sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, saepe voluptate sit. Quasi rem minima veritatis beatae voluptate, temporibus modi quisquam adipisci repellendus nostrum, culpa sapiente fugiat aliquid, sunt deleniti.</p>
                    <p class="about-content">Architecto repudiandae eaque voluptatibus rem voluptatum veritatis debitis cumque repellat doloribus molestias, officiis soluta quo vitae esse minus quisquam est deleniti porro quia consequatur. Ad libero voluptatibus provident maiores quaerat?</p>
                    <p class="about-content">Enim eaque mollitia perferendis nesciunt voluptates, aut voluptatum illo ad, accusantium officia iusto ipsam natus totam deleniti cupiditate nihil culpa quibusdam laudantium soluta molestias! Facilis doloremque odio iste dolores provident!</p>
                    <p class="about-content">Eum a rerum hic, sequi assumenda nostrum facere sit atque, delectus porro quibusdam doloribus dolore? Excepturi alias consequatur minus ipsam, natus voluptatem sunt temporibus eligendi eos expedita. Mollitia magni, ex?</p>
                    <p class="about-content">Reiciendis, incidunt exercitationem, voluptatum quasi atque, aspernatur beatae, sed a voluptatem praesentium amet quisquam itaque nemo impedit accusamus minus ducimus laboriosam omnis saepe? Libero repellat quam nobis, aperiam at saepe.</p>
                    <p class="about-content">Minus facere optio veritatis aliquid temporibus quidem voluptatem asperiores rerum? Alias earum dignissimos, tenetur, aspernatur saepe ullam sapiente sint cupiditate cum voluptates vitae natus magnam, repudiandae perspiciatis ea! Et, molestias.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

I'm not sure what I'm doing wrong, can anybody please help me find a solution? I have set up my demo here: http://codepen.io/kazera/pen/KNrXxB

Thanks!

Upvotes: 1

Views: 56

Answers (1)

Alexandr dmitruk
Alexandr dmitruk

Reputation: 55

You have mistake here

<div class="col-xs-12 col-md-8">

Change it to to

<div class="col-xs-6 col-md-8">

Upvotes: 2

Related Questions