Search code examples
htmlcssmobile-websiteskeleton-css-boilerplate

How to use GetSkeleton to Center one 'div' and float other 'div' right?


I want to Center one div and float other right using any GetSkeleton. How do I do it using GetSkeleton or any other responsive framework? enter image description here

My question is similar to this one Center one <div> and float other right but I am using GetSkeleton so the contents stack vertically on mobile devices.


Solution

  • i figured it out

    <style type="text/css">
        .Menu {
            position: absolute;
            margin-top: 8%;
            right: 5%;
        }
    
        ul.Menu {
            -webkit-padding-start: 0;
            padding: 0;
            padding-left: 0px;
            margin-left: 0px;
            list-style-type: none;
        }
    
        ul.Menu li {
            font-size: 1.2em;
            font-weight: bold;
        }
    
        @media screen and (max-width: 400px) {
            .Menu {
                position: relative;
                margin-top: 0%;
                right: 0px;
            }
    
            ul.Menu li {
                position: relative;
                right: 0px;
                text-align: left;
                text-align: center;
            }
        }
    
    </style>
    
        <div class="row">
            <div class="twelve columns" style="margin-top: 2%; text-align:center;">
                <img src="Content/images/logo.png" alt="Logo" style="width:15%; min-width:150px;" />
            </div>
            <ul class="Menu">
                <li>About us</li>
                <li>Careers</li>
                <li>Contact us</li>
            </ul>
        </div>