Home Responsiveness issue with an affix elements
Reply: 0

Responsiveness issue with an affix elements

user43764
1#
user43764 Published in September 19, 2018, 9:12 am

I'm working on freeCodeCamp project. I have to do a single page portfolio and since I'm new in coding, I have a problem. I've used class="affix" in bootstrap, and my elements are not responsive anymore.

Here is the CSS code:

body {
    font-family: 'Roboto Slab', serif;
}
 .profilPic {
    width: 200px;
    height:200px;
    border-radius: 50%;
    border: 4px solid gray;
    opacity:0.8;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
}
 #heading1 {
    margin-top: 70px;
}
 header{
    background-color: rgb(146, 59, 60);
    width: 1140px;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 999999;
}
 nav{
    background-color: #FFF;
    width:1140px;
    top: 206px;
    margin-left: auto;
    margin-right: auto;
    z-index:999999;
}
 em{
    font-size: 0.7em;
}

And here is the HTML:

<div class="container">
    <header class="affix">
        <div class="row">
            <div class="col-xs-6">
                <h1 id="heading1" class="text-center"><strong>Nikola Petrović<br /></strong><em>Frontend Developer</em></h1>
            </div>
            <div class="col-xs-6"><img src="https://s9.postimg.org/cm58wdyv3/Nikola.jpg" alt="Nikola.jpeg" class="img-responsive profilPic"></div>
        </div>
        <nav>
            <div class="row">
                <div class="col-xs-4">
                    <h3 class="btn btn-block btn-primary">ABOUT <i class="fa fa-info-circle"></i></h3>
                </div>
                <div class="col-xs-4">
                    <h3 class="btn btn-block btn-primary">PORTFOLIO <i class="fa fa-folder-open"></i></h3>
                </div>
                <div class="col-xs-4">
                    <h3 class="btn btn-block btn-primary">CONTACT <i class="fa fa-envelope"></i></h3>
                </div>
            </div>
        </nav>
    </header>
</div>
share|improve this question
  • This is the project that is functional, but without fixed Header element: codepen.io/1Zelenismrad/pen/zRKoqg – Nikola Petrović Feb 12 at 20:07

active oldest votes

Your Answer

StackExchange.ifUsing("editor", function () { StackExchange.using("externalEditor", function () { StackExchange.using("snippets", function () { StackExchange.snippets.init(); }); }); }, "code-snippets"); StackExchange.ready(function() { var channelOptions = { tags: "".split(" "), id: "1" }; initTagRenderer("".split(" "), "".split(" "), channelOptions); StackExchange.using("externalEditor", function() { // Have to fire editor after snippets, if snippets enabled if (StackExchange.settings.snippets.snippetsEnabled) { StackExchange.using("snippets", function() { createEditor(); }); } else { createEditor(); } }); function createEditor() { StackExchange.prepareEditor({ heartbeatType: 'answer', convertImagesToLinks: true, noModals: false, showLowRepImageUploadWarning: true, reputationToPostImages: 10, bindNavPrevention: true, postfix: "", onDemand: true, discardSelector: ".discard-answer" ,immediatelyShowMarkdownHelp:true }); } });
 
StackExchange.ready( function () { StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48751191%2fresponsiveness-issue-with-an-affix-elements%23new-answer', 'question_page'); } );

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged html class responsiveness affix or ask your own question.

StackExchange.ready(function(){$.get('/posts/48751191/ivc/0431');});
StackExchange.ready(function () { StackExchange.responsiveness.addSwitcher(); }) (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m); })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); StackExchange.ready(function () { StackExchange.ga.init({ sendTitles: true, tracker: window.ga, trackingCodes: [ 'UA-108242619-1' ] }); StackExchange.ga.setDimension('dimension2', '|html|class|responsiveness|affix|'); StackExchange.ga.setDimension('dimension3', 'Questions/Show'); StackExchange.ga.trackPageView(); }); /**/ var _qevents = _qevents || [], _comscore = _comscore || []; (function() { var ssl = 'https:' == document.location.protocol, s = document.getElementsByTagName('script')[0], qc = document.createElement('script'); qc.async = true; qc.src = (ssl ? 'https://secure' : 'http://edge') + '.quantserve.com/quant.js'; s.parentNode.insertBefore(qc, s); _qevents.push({ qacct: "p-c1rF4kxgLUzNc" }); /**/ var sc = document.createElement('script'); sc.async = true; sc.src = (ssl ? 'https://sb' : 'http://b') + '.scorecardresearch.com/beacon.js'; s.parentNode.insertBefore(sc, s); _comscore.push({ c1: "2", c2: "17440561" }); })();
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.481291 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO