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! While you're at it, check out some resources Treehouse students have shared here.
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
Brandon Brigham
3,716 PointsWhen 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
17,839 PointsMaybe 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.
qasimalbaqali
17,839 PointsI 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
17,839 PointsAdd ``` 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
3,716 Pointsbody {
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;
}
}
Brandon Brigham
3,716 PointsBrandon Brigham
3,716 PointsYou 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!!