Jump to content
gpterruya

I can't get two div side to side

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

Share this post


Link to post
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.

 

Share this post


Link to post
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;
    }
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...