/* * Skeleton V1.2 improved by IG Design * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 1200 Grid #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 1200 Grid ================================================== */ .container { position: relative; width: 1200px; margin: 0 auto; padding: 0; } .about-top .container { position: relative; width: auto; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;} .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 55px; } .container .two.columns { width: 130px; } .container .three.columns { width: 205px; } .container .four.columns { width: 280px; } .container .five.columns { width: 355px; } .container .six.columns { width: 430px; } .container .seven.columns { width: 505px; } .container .eight.columns { width: 580px; } .container .nine.columns { width: 655px; } .container .ten.columns { width: 730px; } .container .eleven.columns { width: 805px; } .container .twelve.columns { width: 880px; } .container .thirteen.columns { width: 955px; } .container .fourteen.columns { width: 1030px; } .container .fifteen.columns { width: 1105px; } .container .sixteen.columns { width: 1180px; } .container .one-third.column { width: 380px; } .container .two-thirds.column { width: 780px; } /* Offsets */ .container .offset-by-one { padding-left: 75px; } .container .offset-by-two { padding-left: 150px; } .container .offset-by-three { padding-left: 225px; } .container .offset-by-four { padding-left: 300px; } .container .offset-by-five { padding-left: 375px; } .container .offset-by-six { padding-left: 450px; } .container .offset-by-seven { padding-left: 525px; } .container .offset-by-eight { padding-left: 600px; } .container .offset-by-nine { padding-left: 675px; } .container .offset-by-ten { padding-left: 750px; } .container .offset-by-eleven { padding-left: 825px; } .container .offset-by-twelve { padding-left: 900px; } .container .offset-by-thirteen { padding-left: 975px; } .container .offset-by-fourteen { padding-left: 1050px; } .container .offset-by-fifteen { padding-left: 1125px; } #fuji-logo { width: 300px;} .thin-text span { font-size: 24px; padding-right:35px; } @media only screen and (min-width: 1200px) { #about .container { width: 1040px } #about-image-area { float: left; margin-right: 40px; } .about-images { width: 474px; } #about-box { float: left; } #about-box .sub-text p { line-height: 38px; } } #broth-content { width: 440px; padding: 40px; left: 67px; } #broth-content p { font-size: 14px; } @media only screen and (min-width: 1200px) { #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 100%; } #cuisine-title { width: 154px; writing-mode: vertical-rl; font-size: 28px; color: #000000; text-align: center; margin: 0; float: left; line-height: 154px; } #cuisine-box { border-left: 0; border-left: 6px solid #687972; padding: 55px 60px; box-sizing: border-box; margin: 0; float: left; width: calc(100% - 154px); } #cuisine-main { position: relative; } #cuisine-main:after { content: ''; clear: both; } .cuisine-box-font1 { font-size: 26px; font-weight: bold; } .cuisine-box-font2 { font-size: 24px; font-weight: bold; } .cuisine-box-font3 { font-size: 16px; font-weight: bold; } .cuisine-box-font4 { font-size: 14px; } .cuisine-box-font5 { font-size: 13px; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-bowl { position: relative; background-image: url('../images/oryouri.png'); height: 464px; top: 130px; max-width: 423px; margin-bottom: 0px; } #cuisine-request { border-left: 1px solid #000; padding-left: 16px; box-sizing: border-box; width: calc(100% - 154px); margin: 40px 0 0 auto; } } #restaurant .container .row, #info .container .row, #instagram-image-area, #contact .container .row { width: 70%; display: flex; } #restaurant-map { background-image: url('../images/map.jpg'); background-position: center; background-size: cover; margin: 60px auto 15px; width: 70%; } #restaurant-map-info { width: 70%; text-align: left; } .seat-image { margin: 0 196px; } @media only screen and (min-width: 1200px) { .text-separation { white-space: pre-wrap; } } #footer-arrow-top { margin-right: 30px; top: -30px; } #footer-arrow-top a { font-size: 15px;} .footer .container { margin: 0 auto; align-items: center; } #footer-contact { font-size: 13px; width: 145px; padding: 15px 10px; } #footer-contact a #footer-contact-separation { display: none; } #footer-contact-text1 { display: block; } #footer-contact-text2 { display: none; } #footer-info2 { display: none; } /* #Base 960 Grid ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1199px) { .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .about-top .container { position: relative; width: auto; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;} .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } .about h1 {font-size: 32px;} .sub-text {font-size: 13px;} #fuji-logo { width: 300px;} .thin-text span { font-size: 24px; padding-right:35px; } #about .container { width: 860px } #about-image-area { float: left; margin-right: 30px; } .about-images { width: 360px; } #about-box { float: left; width: 400px; } #about-box .sub-text { margin-top: 40px; font-size: 13px; } #about-box .sub-text p { line-height: 28px; } #broth-content { width: 440px; padding: 40px; left: 67px; } #broth-content p { font-size: 14px; } #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 100%; } #cuisine-title { width: 154px; writing-mode: vertical-rl; font-size: 28px; color: #000000; text-align: center; margin: 0; float: left; line-height: 154px; } #cuisine-box { border-left: 0; border-left: 6px solid #687972; padding: 55px 60px; box-sizing: border-box; margin: 0; float: left; width: calc(100% - 154px); } #cuisine-main { position: relative; } #cuisine-main:after { content: ''; clear: both; } .cuisine-box-font1 { font-size: 26px; font-weight: bold; } .cuisine-box-font2 { font-size: 24px; font-weight: bold; } .cuisine-box-font3 { font-size: 16px; font-weight: bold; } .cuisine-box-font4 { font-size: 14px; } .cuisine-box-font5 { font-size: 13px; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-bowl { position: relative; background-image: url('../images/oryouri.png'); height: px; top: 40px; max-width: 423px; margin-bottom: 0px; } #cuisine-request { border-left: 1px solid #000; padding-left: 16px; box-sizing: border-box; width: calc(100% - 154px); margin: 40px 0 0 auto; } #restaurant .container .row, #info .container .row, #instagram-image-area, #contact .container .row { width: 66%; display: flex; } #restaurant-map { background-image: url('../images/map.jpg'); background-position: center; background-size: cover; margin: 60px auto 15px; width: 70%; } #restaurant-map-info { width: 70%; text-align: left; } .seat-image { margin: 0 196px; } .text-separation { white-space: pre-wrap; } #footer-arrow-top { margin-right: 30px; top: -30px; } #footer-arrow-top a { font-size: 15px;} .footer .container { margin: 0 auto; align-items: center; } #footer-contact { font-size: 13px; width: 145px; padding: 15px 10px; } #footer-contact-text1 { display: block; } #footer-contact-text2 { display: none; } #footer-info2 { display: none; } } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;} .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } .about h1 {font-size: 32px;} .sub-text {font-size: 13px;} #fuji-logo { width: 300px;} .thin-text span { font-size: 16px; padding-right:24px; } #menu-wrap { background-color: rgba(0,0,0,.5); } #about .container { width: 100%; } #about-image-area { width: 100%; margin-bottom: 40px; display: flex; } .about-images { height: 240px; width: 100%; } #about-box { width: 84%; margin: 0 auto; } #about-box h1 { text-align: center; } #about-box .sub-text { margin-top: 60px; } #about-box .sub-text p { line-height: 40px; } #broth-content { width: 440px; padding: 40px; left: 0; } #broth-content p { font-size: 14px; } #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 96%; } #cuisine-title { width: 100%; writing-mode: horizontal-tb; font-size: 28px; color: #000000; text-align: center; margin: 0 auto 40px; } #cuisine-box { border-left: 0; border-top: 6px solid #687972; padding: 30px 20px; box-sizing: border-box; margin: 0 auto; width: 100%; } #cuisine-bowl { display: none; } .cuisine-box-font1 { font-size: 20px; font-weight: bold; } .cuisine-box-font2 { font-size: 18px; font-weight: bold; } .cuisine-box-font3 { font-size: 16px; font-weight: bold; } .cuisine-box-font4 { font-size: 14px; font-weight: normal; } .cuisine-box-font5 { font-size: 12px; font-weight: normal; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-request { width: 96%; margin: 20px auto; } #restaurant .container, #seat .container, #info .container, #instagram .container, #contact .container .row { width: 100%; } #restaurant .container .row, #info .container .row, #instagram-image-area { width: 86%; } #restaurant-map { background-image: url('../images/map.jpg'); background-position: center; background-size: cover; margin: 50px auto 15px; width: 86%; } #restaurant-map-info { width: 86%; text-align: center; } #seat-description, .seat-guidance div p { font-size: 15px; width: 90%; } .seat-guidance div p { margin: 0 auto; } .seat-image { margin: 0 55px; } .text-separation { white-space: pre-wrap; } #info .container .row { display: block; } #footer-arrow-top { margin-right: 30px; top: -30px; } #footer-arrow-top a { font-size: 15px;} .footer .container { margin: 0 0 0 30px; width: auto; align-items: center; } #footer-logo { width: 220px; } #footer-logo img { width: 100%; } #footer-info { display: none; } #footer-contact { font-size: 13px; margin-left: auto; padding: 10px 25px; height: fit-content; width: auto; white-space: normal; } #footer-contact-text1 { display: none; } #footer-contact-text2 { display: inline-block; } #footer-info2 { display: block; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } #fuji-logo { width: 56%;} .thin-text span { font-size: 16px; white-space:pre-wrap; padding-right:0; } #menu-wrap { background-color: rgba(0,0,0,.5); } #about .container { width: 100%; } #about-image-area { width: 100%; margin-bottom: 40px; display: flex; } .about-images { height: 200px; width: 100%; } #about-box { width: 84%; margin: 0 auto; } #about-box h1 { text-align: center; font-size: 34px; } #about-box .sub-text { margin-top: 60px; } #about-box .sub-text p { line-height: 40px; } #broth-content { width: 100%; padding: 30px 20px; left: 0; } #broth-content p { font-size: 13px; } #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 96%; } #cuisine-title { width: 100%; writing-mode: horizontal-tb; font-size: 28px; color: #000000; text-align: center; margin: 0 auto 40px; } #cuisine-box { border-left: 0; border-top: 6px solid #687972; padding: 30px 20px; box-sizing: border-box; margin: 0 auto; width: 100%; } #cuisine-bowl { display: none; } .cuisine-box-font1 { font-size: 20px; font-weight: bold; } .cuisine-box-font2 { font-size: 18px; font-weight: bold; } .cuisine-box-font3 { font-size: 16px; font-weight: bold; } .cuisine-box-font4 { font-size: 14px; font-weight: normal; } .cuisine-box-font5 { font-size: 12px; font-weight: normal; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-request { width: 96%; margin: 20px auto; } #restaurant .container, #seat .container, #info .container, #instagram .container, #contact .container .row { width: 100%; } #restaurant .container .row, #info .container .row, #instagram-image-area { width: 86%; } #restaurant .container .row { display: block; } #restaurant-map { background-image: url('../images/map_sp.jpg'); background-position: center; background-size: cover; margin: 40px auto 15px; width: 86%; } #restaurant-map-info { width: 86%; text-align: center; } #seat-description, .seat-guidance div p { font-size: 15px; width: 90%; } .seat-guidance div p { margin: 0 auto; } .seat-image { margin: 0 15px; } .text-separation { white-space: pre-wrap; } #info .container .row { display: block; } #latest-info { width: 90%; } #footer-arrow-top { margin-right: 10px; top: -20px; } #footer-arrow-top a { font-size: 11px;} .footer .container { margin: 40px 0 0 30px; width: auto; align-items: center; } #footer-logo { width: 220px; } #footer-logo img { width: 100%; } #footer-info { display: none; } #footer-contact { font-size: 11px; margin-left: auto; padding: 10px 25px; height: fit-content; width: auto; white-space: normal; } #footer-contact-text1 { display: none; } #footer-contact-text2 { display: inline-block; } #footer-info2 { display: block; } } /* #Mobile ================================================== */ @media only screen and (min-width: 320px) and (max-width: 479px) { .container { width: 300px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } #fuji-logo { width: 56%;} .thin-text span { font-size: 16px; white-space:pre-wrap; padding-right:0; } #menu-wrap { background-color: rgba(0,0,0,.5); } #about .container { width: 100%; } #about-image-area { width: 100%; margin-bottom: 40px; display: flex; } .about-images { height: 160px; width: 100%; } #about-box { width: 90%; margin: 0 auto; } #about-box h1 { text-align: center; font-size: 28px; } #about-box .sub-text { margin-top: 60px; font-size: 12px; } #about-box .sub-text p { line-height: 24px; } #broth-content { width: 100%; padding: 30px 20px; left: 0; } #broth-content p { font-size: 13px; } #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 96%; } #cuisine-title { width: 100%; writing-mode: horizontal-tb; font-size: 28px; color: #000000; text-align: center; margin: 0 auto 40px; } #cuisine-box { border-left: 0; border-top: 6px solid #687972; padding: 30px 20px; box-sizing: border-box; margin: 0 auto; width: 100%; } #cuisine-bowl { display: none; } .cuisine-box-font1 { font-size: 16px; font-weight: bold; } .cuisine-box-font2 { font-size: 14px; font-weight: bold; } .cuisine-box-font3 { font-size: 12px; font-weight: bold; } .cuisine-box-font4 { font-size: 12px; font-weight: normal; } .cuisine-box-font5 { font-size: 11px; font-weight: normal; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-request { width: 96%; margin: 20px auto; } #restaurant .container, #seat .container, #info .container, #instagram .container, #contact .container .row { width: 100%; } #restaurant .container .row, #info .container .row, #instagram-image-area { width: 86%; } #restaurant .container .row { display: block; } .row-body-separation { white-space:pre-wrap; } #restaurant-map { background-image: url('../images/map_sp.jpg'); background-position: center; background-size: cover; margin: 40px auto 15px; width: 86%; } #restaurant-map-info { width: 86%; text-align: center; } #seat-description, .seat-guidance div p { font-size: 13px; width: 90%; } .seat-guidance div p { margin: 0 auto; } .seat-image { margin: 0 10px; } #info .container .row { display: block; } #latest-info { width: 90%; } #footer-arrow-top { margin-right: 10px; top: -20px; } #footer-arrow-top a { font-size: 11px;} .footer .container { margin: 40px 0 0 30px; width: auto; align-items: center; } #footer-logo { width: 50%; } #footer-logo img { width: 80%; } #footer-info { display: none; } #footer-contact { font-size: 11px; margin-left: auto; padding: 10px 25px; height: fit-content; width: auto; white-space: normal; } #footer-contact-text1 { display: none; } #footer-contact-text2 { display: inline-block; } #footer-info2 { display: block; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 319px) { .container { width: 220px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 220px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } #fuji-logo { width: 56%;} .thin-text span { font-size: 16px; white-space:pre-wrap; padding-right:0; } #menu-wrap { background-color: rgba(0,0,0,.5); } #about .container { width: 100%; } #about-image-area { width: 100%; margin-bottom: 40px; display: flex; } .about-images { height: 160px; width: 100%; } #about-box { width: 90%; margin: 0 auto; } #about-box h1 { text-align: center; font-size: 20px; } #about-box .sub-text { margin-top: 60px; font-size: 12px; } #about-box .sub-text p { line-height: 24px; } #broth-content { left: 0; } #broth-content p { font-size: 13px; } #cuisine { padding-top: 40px; margin-bottom: 40px; } #cuisine .container { width: 96%; } #cuisine-title { width: 100%; writing-mode: horizontal-tb; font-size: 28px; color: #000000; text-align: center; margin: 0 auto 40px; } #cuisine-box { border-left: 0; border-top: 6px solid #687972; padding: 30px 20px; box-sizing: border-box; margin: 0 auto; width: 100%; } #cuisine-bowl { display: none; } .cuisine-box-font1 { font-size: 16px; font-weight: bold; } .cuisine-box-font2 { font-size: 14px; font-weight: bold; } .cuisine-box-font3 { font-size: 12px; font-weight: bold; } .cuisine-box-font4 { font-size: 12px; font-weight: normal; } .cuisine-box-font5 { font-size: 11px; font-weight: normal; } .cuisine-box-separation { white-space: pre-wrap; } #cuisine-request { width: 96%; margin: 20px auto; } #restaurant .container, #seat .container, #info .container, #instagram .container, #contact .container .row { width: 100%; } #restaurant .container .row, #info .container .row, #instagram-image-area { width: 86%; } #restaurant .container .row { display: block; } .row-body-separation { white-space:pre-wrap; } #restaurant-map { background-image: url('../images/map_sp.jpg'); background-position: center; background-size: cover; margin: 40px auto 15px; width: 86%; } #restaurant-map-info { width: 86%; text-align: center; } #seat-description, .seat-guidance div p { font-size: 13px; width: 98%; } .seat-image { margin: 0 10px; } #info .container .row { display: block; } #latest-info { width: 90%; } #footer-arrow-top { margin-right: 10px; top: -20px; } #footer-arrow-top a { font-size: 11px;} .footer .container { margin: 40px 0 0 30px; width: auto; align-items: center; } #footer-logo { width: 50%; } #footer-logo img { width: 80%; } #footer-info { display: none; } #footer-contact { font-size: 11px; margin-left: auto; padding: 15px 25px; height: fit-content; width: auto; white-space: normal; } #footer-contact-text1 { display: none; } #footer-contact-text2 { display: inline-block; } #footer-info2 { display: block; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }