Any tips for accounting for phone orientation?

Any tips for accounting for phone orientation?
0.0 0

#1

I’m in the middle of designing my portfolio and it seems like I can’t do even the simplest things such as setting the width of a photo without checking all the different scenarios for which a user might be accessing my site. Here’s an example:

Honestly it’s getting to be a total nightmare figuring out how I want a page laid out, and then rotating the phone screen to find that everything is busting out of where it’s supposed to be. Does anyone have any tips for handling stuff like this? Should I design a completely different site for mobile just to break it up?

Here’s my code:


<div id="about">
    <div class="row">
        <div class="title col-xs-7 col-md-3" id="about_title">
            <div class="container-fluid">
                <h3>About</h3>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-lg-2 col-lg-offset-1" class="no-margin" id="about_img">
                <img class="img-fluid" src="img/profile.jpg">
            </div>
            <div class="col-xs-6" id="about_content_side">
                <strong>Hello,</strong>
                <p>My name is Sam Cole.</p>
                <p>
                    I'm a full stack web developer located in the Twin Cities.
                    I will be graduating from the University of St. Thomas in May 2018.
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-lg-10 col-lg-offset-1" id="about_content_bottom">
                <p>
                    <h5>Education</h5>
                    I am pursuing a Bachelor of the Arts with a major in Computer and Information Sciences and German at the <a href="https://www.stthomas.edu/">University of St. Thomas</a>
                </p>
                <p>
                    <h5>Languages and Technologies</h5>
                    <div id="skills_icons">
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="devicon-html5-plain-wordmark"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-css3-plain-wordmark"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-javascript-plain"></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="devicon-bootstrap-plain-wordmark"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-sass-original"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-jquery-plain-wordmark"></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="devicon-php-plain"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-mysql-plain-wordmark"></i>
                            </div>
                            <div class="col-xs-4">
                                <i class="devicon-apache-line-wordmark"></i>
                            </div>
                        </div>  
                    </div>
                </p>
            </div>
        </div>
    </div>
</div>
#about {
    background: $red;
    height: 100vh;
    padding-top: 5vh;
    font-size: 2vh;
}

#about_img {
    padding: 5px;
    background: rgb(120, 138, 163);
    border-radius: 5px;
    box-shadow: $shadow-main;
}

#about_img img{
    border-radius: 5px;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

#skills_icons {
    text-align: center;
    font-size: 6vh;

    .row{
        padding: 5px;
    }
}

#about_title {
    background: $blue-main;
    box-shadow: $shadow-main;
    
    height: 8vh;
    margin-bottom: 3vh;
}

#about_title h3 {
    margin: 0;
    line-height: 8vh;
}

#about_content_side {
    padding-top: 2vh;
}

#about_content_side strong {
    font-size: 4vh;
}

#about_content_side p {
    margin: 1vh 0;
}

#about_content_bottom {
    padding-top: 2vh;

    h5 {
        padding-top: 1vh;
        font-size: 2.5vh;
        font-weight: 700;
    }

    a {
        font-weight: 700;
        color: $stthomas;
    }
}

#2

You can use media queries to detect the orientation and size of the screen in CSS. Media queries will apply different CSS rules to those screens that fall within their range. For instance:

@media (max-width: 1080px) and (orientation: landscape) {
insert css rules here
}

Will let you write CSS for screens under 1080 px and are in landscape orientation. You can read more about them on MDN.


#3

Don’t think in terms of device orientation. Just focus on screen width. Bootstrap (and Foundation, and Materialize, etc) provides the tools for great responsive design, but it’s not always easy to make those pieces work. Your problem is probably that you’re missing the sm and md sizes. Bootstrap’s size classes are the smallest size that you want the rule to kick in, so if you have a bunch of xs and lg rules, there’s a big gap where sm and md sizes will have to use whichever xs rules you set, which can look funky. It looks great so far, though!

Definitely do not

It’s not 2005 anymore. We don’t need Flash, and we don’t need mobile domains.


#4

Thankfully WAP sites also died.


#5

Thanks for all of the replies! Is there a way to move the content starting from education downward to the right of the picture for certain orientations? That seems to be the best layout from what I can see but I’m not sure how I could get it to move up there considering they’re in two separate rows.