Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

When zooming in on an iPhone my sidebar disappears...

Hello,

Please check out the site I'm working on @ http://burnttoastusa.com. If you view it on a smartphone like the iPhone if you zoom in with your fingers to view the menu closer the menu dashes off to the right and basically disappears....

How can I get it so that the menu (sidebar) stays where it should be when zooming in on the phone?

Thanks for any help!

2 Answers

qasimalbaqali
qasimalbaqali
17,839 Points

Maybe I am wrong but I think it's because of the fixed position? Try adding viewport at the top of your html under the head tag. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag Maybe that will fix it with using media queries too? I'm not sure. I can't help much because the HTML, CSS, and the images aren't with me so I can play with them. Hope it helps.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

You were right about the fixed position on the .head element. The problem is however is that my client wants it to scroll down when moving down the page so that element needs to be fixed... I guess I will try to make the parent element fixed or something like that.

Thanks for your help!!

qasimalbaqali
qasimalbaqali
17,839 Points
qasimalbaqali
qasimalbaqali
17,839 Points

I have checked it on my phone (HTC M8) and it does exactly like what you have said, I might be wrong as I am not a CSS pro but it might be the margin and puddings. Try playing with those or maybe use the position: fixed or absolute? I have no idea. Sometimes I just put random CSS that I think would work and they magically do.

If you'd share your CSS and I might help play around with it and maybe I can fix it for you that would be good :)

qasimalbaqali
qasimalbaqali
17,839 Points

Add ``` at the start and at the end of the code so it gets put into a code block in the forum so it's easier to see :)

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points 
body {
    margin:auto;
    background: #ffffff;
    font-family: 'Arial', Arial;
    font-size: 11px;
    color: #3F3F3F;
    line-height: 15px;
}


a:hover {
    color: #dddddd;
    -webkit-transition-duration: .5s;}

a {color: #000000;
text-decoration: none;}

.about {  width: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 25%;
  vertical-align: middle;
        }

.projects {
     position: absolute;
    top: 20%;
    left: 28%;
    font-size: 1em;
        }        

.content {
    bottom:0;
    margin:0 auto;
    max-width:100%;
    margin-bottom:5px;
    margin-left: 0px;
    }

.sidebar {
background-color: transparent;
padding-bottom: 20px;
top: 0;
right: 53px;
height: 100%;
font-size: 9px;
float: right;
text-align: left;
position: absolute;

}

.post{
    width: 100%;
    margin: 0 auto;
    margin-bottom:0px;
    text-align: center;
}

.post img{
    max-width:840px; 
    height: auto;
    margin: 0 auto;
}

.photo img { max-width: 840px; }


.permalink{
    opacity:0;
    position:absolute;
    float:left;
    padding-left:15px;
    margin-left:300px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


.permalink a:hover{
color:#dddddd

}

.post:hover .permalink {opacity: 1;}





.notetitle{
    padding-left:14px;
    text-transform:uppercase;
    padding-bottom:10px;

}

.notes{
    margin-top:-4px;
    margin-bottom:25px;
    padding-left:15px;
}

ol.notes{
    list-style-type:none;
}

ol.notes li.note{
    padding:2px;

}


.social-media-row {
padding-left: 78px;
margin-top: 95px;
}

}


.caption{
    margin-top:5px; 
    margin-bottom:15px;
    padding-left:49px;
    text-align: left;
     display: none;


}

.information{
    text-align:left;
    line-height: 15px;
    padding-top:0px;

}

.information-menu {
margin-top: 5px;
padding-left: 95px;
}

.pag{
    bottom:10px;
    text-align:right;
    font-size: 9px;
    position:fixed;
    margin-left:310px;
}


.links{
    font-size:9px;
    text-align:right;
    padding-bottom:3px;
}

.head {
top: -25px;
position: fixed;
width: 250px;
}


#icon {
width: 90px;
height: 90px;
background-image: url(http://burnttoastusa.com/wp-content/uploads/2015/01/burnt-toast-90px.png);
float: left;
margin-top: 70px;
margin-left: 70px;
margin-bottom: 10px;
}

.title {
    font-size:15px;
    font-style:italic;
}

.blogtitle{
    text-align:right;
    font-style:italic;
    color:#000000;
    font-family:'Century Gothic', 'Apple Gothic', sans-serif;
    padding-top:20px;
    font-size:11px;

    line-height:15px;
}

.page-title-container {
display: none;
}

#header {

}

#wrapper .header-social {
display: none;
}

div#small-nav {
display: none;
}

.header-wrapper {
height: 0px;
}

.products li {
border-color:transparent;
}

.product .product-buttons {
border-top: transparent;
}

.product-buttons, .product .product-buttons {
border-color:transparent;
display:none;
}

.product-details-container {
border-color:transparent;
display:none;
}

.product-title {
display:none;
}

.order-dropdown {
display: none;
}

.orderby-order-container {
display: none;
}

.related.products, .upsells.products {
display: none;
}

.woocommerce-tabs {
display: none;
}

.woocommerce-content-box.full-width {
border: none;
}

.ls-avada, .avada-skin-rev, .es-carousel-wrapper.fusion-carousel-small .es-carousel ul li img, .fusion-accordian .fusion-panel, .progress-bar, #small-nav, .portfolio-tabs, .faq-tabs, .single-navigation, .project-content .project-info .project-info-box, .fusion-blog-medium-alternate .post, .fusion-blog-large-alternate .post, .post .meta-info, .grid-layout .post .post-wrapper, .grid-layout .post .content-sep, .portfolio .portfolio-boxed .portfolio-item-wrapper, .portfolio .portfolio-boxed .content-sep, .portfolio-one .portfolio-item.portfolio-boxed .portfolio-item-wrapper, .grid-layout .post .flexslider, .timeline-layout .post, .timeline-layout .post .content-sep, .timeline-layout .post .flexslider, h3.timeline-title, .timeline-arrow, .fusion-counters-box .fusion-counter-box .counter-box-border, tr td, .table, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td, .table-1 table, .table-1 table th, .table-1 tr td, .tkt-slctr-tbl-wrap-dv table, .tkt-slctr-tbl-wrap-dv tr td .table-2 table thead, .table-2 tr td, .sidebar .widget li a, .sidebar .widget .recentcomments, .sidebar .widget_categories li, #wrapper .fusion-tabs-widget .tab-holder, .commentlist .the-comment, .side-nav, #wrapper .side-nav li a, .rtl .side-nav, h5.toggle.active + .toggle-content, #wrapper .side-nav li.current_page_item li a, .tabs-vertical .tabset, .tabs-vertical .tabs-container .tab_content, .fusion-tabs.vertical-tabs.clean .nav-tabs li .tab-link, .pagination a.inactive, .page-links a, .woocommerce-pagination .page-numbers, .bbp-topic-pagination .page-numbers, .rtl .woocommerce .social-share li, .author .author_social, .fusion-blog-medium .entry-meta, .fusion-blog-large .entry-meta, .side-nav li a, .sidebar .product_list_widget li, .sidebar .widget_layered_nav li, .price_slider_wrapper, .tagcloud a, .sidebar .widget_nav_menu li, .sidebar .widget_categories li, .sidebar .widget_product_categories li, .sidebar .widget_meta li, .sidebar .widget .recentcomments, .sidebar .widget_recent_entries li, .sidebar .widget_archive li, .sidebar .widget_pages li, .sidebar .widget_links li, .sidebar .widget_layered_nav li, .sidebar .widget_product_categories li, #customer_login_box, .avada_myaccount_user, #wrapper .myaccount_user_container span, .woocommerce-side-nav li a, .woocommerce-content-box, .woocommerce-content-box h2, .my_account_orders tr, .woocommerce .address h4, .shop_table tr, .cart_totals .total, .chzn-container-single .chzn-single, .chzn-container-single .chzn-single div, .chzn-drop, form.checkout .shop_table tfoot, .input-radio, p.order-info, .cart-content a img, .panel.entry-content, .woocommerce-tabs .tabs li a, .woocommerce .social-share, .woocommerce .social-share li, .quantity, .quantity .minus, .quantity .qty, .shop_attributes tr, .woocommerce-success-message, #reviews li .comment-text, .cart-totals-buttons, .cart_totals, .shipping_calculator, .coupon, .woocommerce .cross-sells, #customer_login .col-1, #customer_login .col-2, .woocommerce-message, .woocommerce form.checkout #customer_details .col-1, .woocommerce form.checkout #customer_details .col-2, .cart_totals h2, .shipping_calculator h2, .coupon h2, .woocommerce .checkout h3, #customer_login h2, .woocommerce .cross-sells h2, .order-total, .woocommerce .addresses .title, #main .cart-empty, #main .return-to-shop, .side-nav-left .side-nav {
border: none;
}


.fusion-title .title-sep, .product .product-border {
border: none;
}

.product_meta {
display: none;
}

#content {
margin-left: 145px;
}

@media screen and (max-width: 940px) {

.sidebar {
padding-right:20px;
}

}

@media screen and (max-width: 720px) {

#content {
margin-left: 30px;
}

}

@media screen and (min-width: 640px) {

.header-v5 #header .logo {
display: none;
}

.sidebar {
padding-right:40px;

}



}



@media screen and (max-width: 640px) {

.header-v5 {
display: none;
}

#header-sticky .retina_logo, #header .retina_logo, #side-header .retina_logo {
display: none;
}


#content {
margin-left: 0px;
}

.sidebar {
padding-right:40px;
}

}