Jump to content

I can't get two div side to side


gpterruya
 Share

Recommended Posts

I'm programming my website and I've watched a tutorial about responsive websites, in this tutorial the guy said that is recommended to start with the mobile version (480px). I did it everything was alright. I separated my website into columms and rows. When I tried to create a media query (768px), I want to get two of my divs side to side, but I everything I try to do simply doesn't work, so if there is anyone who can help me I would appreciate. I tried to create a div named col-md-one-half to add to my css the properties to these 2 divs and I still couldn't make it. I uploaded all the archives in order to make everything ease to see.

responsivo.zip

Edited by gpterruya
Link to comment
Share on other sites

You have so many DIVs, so the question becomes:  Which 2 DIVs are you trying to place side-by-side.
Difficult to tell from your zipped code.

Then the question becomes: Why are you doing it that way?
It would be much easier to use a Flexbox or Grid layout
which can be made responsive very easily with CSS media settings.

 

Link to comment
Share on other sites

You shouldn't target the body but a wrapping container element within the body element ,

  <body>
        <div class="wrapper">
            <div class="row">
                <div class="col">
                    <div id="home">
                        <header>
                            <a href="" class="site-logo">
                                <img src="img/logo-white.png" alt="">
                            </a>
                            <nav class="site-nav">

                                <ul>
                                    <li><a href="#home">HOME</a></li>
                                    <li><a href="#sobre">SOBRE</a></li>
                                    <li><a href="#portfólio">PORTFÓLIO</a></li>
                                    <li><a href="#contato">CONTATO</a></li>
                                </ul>

                            </nav>
                        </header>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <section class="hero">
                        <div class="hero-content">
                            <h2>Gabriel Porto Terruya</h2>
                            <h1>Meu Portfólio</h1>
                            <h3>Produtor Audiovisual, São Paulo</h3>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <section class="intro">
                        <div class="intro-text">
                            <p>estudante de cinema e audiovisual pela espm-sp, possuo certificados de competência em Photoshop e Illustrator.</p>
                        </div>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col col-md-one-half">
                    <section class="artworks">
                        <article class="artwork">
                            <div class="artwork-piece"> <a name="portfólio"></a>
                                <figure>
                                    <img src="img/goldrush.jpg" alt="">
                                </figure>
                            </div>
                            <div class="col col-md-one-half">
                                <div class="artwork-description">
                                    <h2 class="artwork-title">Portfólio</h2>
                                    <p class="artwork-text">Já produzi alguns produtos audiovisuais como: documentário que concorreu ao MegaCities-ShortDocs e um curta de um minuto que participou do Festival do Minuto. Sou apresentador do canal do Youtube  Nada Não, além de possuir gosto por fotografia.</p>
                                    <a class="see-more" href="#">Veja mais</a>
                                </div>
                            </div>
                        </article>
                    </section>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <footer> <a name="contato"></a>
                        <div class="footer-content">
                            <ul class="footer-social">
                                <li>
                                    <a href="https://www.facebook.com/gabriel.portoterruya">
                                        <img class="social-default" src="img/social-facebook.png" alt="">
                                        <img class="social-hover" src="img/social-facebook-hover.png" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.instagram.com/gpterruya/?hl=pt-br">
                                        <img class="social-default" src="img/social-instagram.png" alt="">
                                        <img class="social-hover" src="img/social-instagram-hover.png" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/gpterruya">
                                        <img class="social-default" src="img/social-twitter.png" alt="">
                                        <img class="social-hover" src="img/social-twitter-hover.png" alt="">
                                    </a>
                                </li>
                            </ul>
                            <div class="footer-info">
                                <p class="footer-legal">&copy; 2020 Gabriel Porto Terruya. Todos os direitos reservados.</p>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </body>

css

@charset "utf-8";
/* CSS Document */
html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: arial," sans-serif";
}
header {
    padding: 32px;
    background-color: #a2f92f;
}
.col {
    width: 100%;
}
.site-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 192px;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.site-nav ul li a {
    text-decoration: none;
    color: #ffffff;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    padding: 8px;
    letter-spacing: .15em;
    -webkit-transition: color .3s;
    transition: color .3s;
}
.site-nav ul {
    list-style-type: none;
    text-align: center;
}
.site-nav ul li a:hover {
    outline: none;
    border-bottom: 1px solid white;
}
.hero {
    position: relative;
    background-color: #a2f92f;
    color: #ffffff;
    text-align: center;
    padding: 20px 20px 50px 20px;
}
h2 {
    font-weight: 100;
    font-size: 1.5em;
    line-height: 2.2;
    margin-bottom: 120px;
    letter-spacing: .3em;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
}
h1 {
    margin-bottom: 35px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0,.05);
    text-transform: uppercase;
    font-size: 1.625em;
    letter-spacing: .85em;
}
h3 {
    font-size: 0.75em;
    font-weight: 100;
    line-height: 2.75;
    letter-spacing: .35em;
    text-transform: uppercase;
    text-shadow: 0px 0px 8px rgba(0, 0, 0,.2);
    margin-bottom: 60px;
}
.intro {
    color: #343144;
    padding: 30px 20px 60px;
    text-align: center;
    font-family: 'arial', sans-serif;
    text-transform: uppercase;
    font-size: 1.25em;
    line-height: 1.8;
    letter-spacing: .325em;
}
.artwork .artwork-piece {
    padding: 8% 8% 8% 8%;
    background-image: -webkit-linear-gradient(top left, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
    background-image: -o-linear-gradient(top left, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
    background-image: linear-gradient(to bottom right, rgb(160,55,220) 0%, rgb(83,200,234) 100%);
}
.artwork-piece figure {
    position: relative;
}
.artwork-piece figure img {
    position: relative;
    z-index: 100;
}
.artwork .artwork-description {
    background: #26223e;
    color: #ffffff;
    padding: 5.625em 6.5em 5.625em;
    text-align: center;
}
.artwork-title {
    font-family: 'arial', sans-serif;
    font-size: 1.5em;
    font-weight: 100;
    padding: 2em 0 0 0;
    letter-spacing: .36em;
    text-transform: uppercase;
    line-height: 1.5;
    max-width: 18em;
    margin-bottom: .5em;
    display: inline-block;
}
.artwork-text {
    font-size: 0.55em;
    line-height: 1.9;
    opacity: .8;
    max-width: 40em;
}
.see-more {
    font-size: 1em;
    display: inline-block;
    margin-top: 4.1em;
    padding: 0 0 .4em 0;
    transition: all .3s;
    text-decoration: none;
}
.see-more:hover {
    border-bottom: 1px solid white;
}
a, a:visited {
    color: inherit;
}
footer {
    margin-top: -3.5em;
    padding-top: 10em;
    background-image: -webkit-linear-gradient(bottom left, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
    background-image: -o-linear-gradient(bottom left, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
    background-image: linear-gradient(to top right, rgb(255,91,127) 0%, rgb(255,213,86) 100%);
}
.footer-content {
    width: 100%;
    margin: 0 auto;
    padding-bottom:1.7em;
}
.footer-social {
    display: block;
    width: 100%;
    list-style-type: none;
    text-align: center;
}
.footer-social li {
    display: inline-block;
    margin: 0 1.2em;
}
.footer-social li a {
    line-height: 3.5em;
    display: inline-block;
    width: 4em;
    height: 4em;
    text-align: center;
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 50%;
}
.footer-social li a:hover {
    border-color: #fff;
    background: #fff;
}
.footer-social li a img {
    width: auto;
    height: 1em;
}
.footer-social li a .social-hover {
    display: none;
}
.footer-social li a:hover .social-default {
    display: none;
}
.footer-social li a:hover .social-hover {
    display: inline;
}
.footer-info {
    padding-top: 5em;
}
.footer-info p {
    font-size: .8em;
    color:#fff;
    line-height: 1.55;
    max-width: 36em;
    margin-bottom: 1.7em;
}
.footer-info {
    clear: both;
}
@media (min-width: 768px){
    body:before {
        content:"768px";
        position: fixed;
        left:0;
        top: 0;
        height: 50px;
        width: 100px;
        background: red;
    }
    #wrapper {
        max-width: 778px;

    }
    .site-nav ul li {
        display: inline-block;
    }
    .site-nav ul {
        text-align: center;
    }
    h1 {
        font-size: 40px;
        margin-bottom: 90px;
    }
    h2 {
        margin-bottom: 16px;
    }
    .col-md-one-half {
    }

    .col {
        float: left;
    }
    .artwork {
        display: flex;
    }
    .artwork .artwork-piece {
        padding: 8% 0 8% 23.5%;
        width: 50%;
    }
}
@media (min-width: 992px){
    body:before {
        content:"992px";
        position: fixed;
        left:0;
        top: 0;
        height: 50px;
        width: 100px;
        background: yellow;
    }
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...