Untitled

@media screen and (max-width:331px) {
    .header, .header2, .footer, .sub-footer {
        padding-left: 20px;
        padding-right: 20px;

    }

/* HEADER START*/
    .header {
        flex-direction: column;
        align-items: center;
    }

    .org-name {
        margin:0px;
    }

    .navbar-item, .page-title {
        font-size: 80%;
    }

    .navbar-item {
        padding:0 8px 0 8px;
    }

    .line {
        border-top:1px solid #eee;
        width:100%;
        display:block;
    }

/* HEADER END*/

/* CONTENT 1 START*/

    .content1 {
        flex-direction: column-reverse;
       
    }
    
/* CONTENT 1 END*/

/* CONTENT 2 START */

    .content2-container {
        flex-direction: column;
        padding-top:20px;
        padding-bottom:20px;
    }

    .ingredients {
        font-size: 14px;

    }
        

    .instructions {
        padding-top: 20px;
        flex-basis:0px;
    }
        
/* CONTENT 2 END */

/* RATINGS START */

    .ratings {
        flex-direction: column;
        padding: 0;
    }

    .ratings > * {
        margin-top: 20px;
    }

    .ratings-votes {
        align-self: stretch;
    }

/* RECOMMENDATIONS START */

    #recommendations {
        padding: 10px 10px 20px 10px;
    }

    #recommendations h1 {
        letter-spacing: 0;
        font-size: 30px;
        margin: 10px 0 5px;
    }

    .food-cards {
        flex-direction: column;
        
    }

    .food-cards > *:not(:last-child) {
        margin-bottom:50px;
    }

/* RECOMMENDATIONS END */

/* FOOTER START */

    .footer-container {
        flex-direction: column;
        align-items: center;
        padding-left: 25px;
        
    }

    .footer-logo {
        padding-left: 50px;
    }

    #contact {
        padding:15px 0 30px 10px;
    }

    #contact ul li {
        line-height:20px;
    }

    .footer-details{
        font-size: 12px;
    }

    #social ul{
        margin-right: 20px;
    }

    #social img {
        margin:0px 5px 0 5px;
    }

/* FOOTER END */

/* SUBFOOTER START */

    .sub-footer-container {
        flex-direction: column;
        align-items: center;
    }

    .sub-footer-container img{
        margin:0;
    }

/* SUBFOOTER END*/

}