Element disappears when zooming in on an iPhone or smartphone

Question

Hello,

This is the site I'm working on:

When viewing on a smartphone and zooming in, the menu/sidebar disappears.

What my client wants: The sidebar to be fixed, in that when scrolling down the element follows you. This seems to be impossible to do without it disappearing when zooming in on an iPhone.

Any ideas?

Thanks!

Answer 1 · 2015-01-06T14:46:09Z

January 6, 2015 2:46pm

Instead of posting the css for one page and the html from another, could you post the html and css for the page that is causing trouble?Ideally also the class and id of the menu you are trying to change. I assuming .sidebar is the “menu" you mentioned: in your css the position is absolute, in the tumblr it is fixed. Btw the css you had .Pag {...} I assume you meant .pagE.

Answer 2 · 2015-01-05T21:05:24Z

January 5, 2015 9:05pm

can you post your code so we can see what you have so far. to make the menu fixed in your CSS try position: fixed; and use opacity: 9; to give it that slightly see through look. if we see the code, we will be better able to help.

Answer 3 · 2015-01-05T21:13:58Z

January 5, 2015 9:13pm

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: 2px;
padding-left: 98px;
}

.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;
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;
}







}


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





}


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






}

Answer 4 · 2015-01-05T21:15:03Z

January 5, 2015 9:15pm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<!-- 
Curato Theme
Kelsey (http://www.atonals.tumblr.com)
This text should never be deleted, nor should the credit link placed in the theme code.

-->

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}

<meta name="color:text" content="#3c3c3c"/>
<meta name="color:links" content="#000000"/>
<meta name="color:link hover" content="#dddddd"/>
<meta name="color:background" content="#ffffff"/>
<meta name="if:small images" content="0"/>
<meta name="if:endless scroll" content="0" />
<meta name="if:photo information" content="1" />
<meta name="if:show captions" content="0"/>
<meta name="text:blogtitle size" content="25" />
<meta name="text:text size" content="12" />

<meta name="font:body" content="baskerville" />
<meta name="font:title" content="Baskerville" />



<style type="text/css">

iframe#tumblr_controls {
top: 0% !important;
right:0% !important; 
position: absolute !important;}

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

.photoinfo {
display: none;
}


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: 75px;
height: 100%;
font-size: 9px;
padding-right: 103px;
float: right;
text-align: left;
position: fixed;
}

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

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

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


.audio{
    width:700px;
    overflow:hidden;
    background:#000;
    margin: 0 auto;
}


.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;
    display:none;

}

.information-menu {
margin-top: 2px;
padding-left: 98px;
}


.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;
}




@media all and (min-width : 0px) and (max-width : 600px)  {
        .sidebar { background: transparent; }
            }

            @media only screen and (min-device-width : 0px) and (max-device-width : 600px)  {
            .sidebar { background: transparent;}
            }



.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}

@media screen and (max-width: 1064px) {
    .post img {
max-width: 650px;
}

}

@media screen and (max-width: 852px) {
    .post img {
max-width: 450px;
}

}

@media screen and (max-width: 676px) {
    .post img {
max-width: 250px;
}

}

@media screen and (max-width: 480px) {
    .post img {
max-width: 175px;
}

}

</style>


{block:ifendlessscroll}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:ifendlessscroll}
</head>
<body>
<div class="content">
<div class="sidebar">
<div class="head">
<br><a href="http://burnttoastusa.tumblr.com/"><div id="icon"></div></a>
<br>
<br>
<br>
<br>
<br>
<div class="social-media-row">
<a href="http://instagram.com/burnttoastusa"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/instagram.png" style="padding:4px; width:16px;"/></a><a href="https://twitter.com/burnttoastusa?lang=en"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/twitter.png" style="padding:4px; width:16px;"/></a><a href="mailto:info@burnttoastusa.com"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/mail.png" style="padding:4px; width:16px;"/></a></div>
<div class="information-menu">

<a href="http://burnttoastusa.tumblr.com/"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/menu-item-1.png" style="padding:5px; width:23px;"/></a>&nbsp&nbsp;<br>

<a href="http://burnttoastusa.com/store/"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/menu-item-2.png" style="padding:5px; width:23px;"/></a>&nbsp&nbsp;<br><a href="http://burnttoastusa.com/submit"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/menu-item-3.png" style="padding:5px; width:23px;"/></a>&nbsp&nbsp;<br><a href="http://burnttoastusa.com"><img src="http://burnttoastusa.com/wp-content/uploads/2014/12/menu-item-4.png" style="padding:5px; width:23px;"/></a>&nbsp&nbsp
<p></div></div>







<div class="information"><a href="/ask">message</a>&nbsp;<a href="/archive">archive</a>&nbsp;{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>&nbsp;{/block:Pages}{/block:HasPages}<a href="http://atonals.tumblr.com">theme</a>
<p>{description}</div>
</div>
{block:ifnotendlessscroll}
<div class="navigation">{block:Pagination}{block:NextPage}<p id="page_nav"><a href="{NextPage}" id="next">older</a>{/block:NextPage}{block:PreviousPage}<a href="{PreviousPage}"> // newer</a></p>{/block:PreviousPage}{/block:Pagination}</div>
{/block:ifnotendlessscroll}
{block:ifendlessscroll}<div class = "autopagerize_page_element">{/block:ifendlessscroll}{block:Posts}

{block:Text}
<div class="post">
{block:Title}<div class="title">{Title}</div>{/block:Title}
{Body}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}

{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 

</div>
{/block:Text}


{block:Photo}
<div class="post"align="center">
{block:ifphotoinformation}
<div class="photoinfo">{NoteCountWithLabel}<br>{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
{/block:ifphotoinformation}

{block:IndexPage}
<a href="{Permalink}">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}{/block:IndexPage}</a>

{block:PermalinkPage}
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/><div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage}


</div>
{/block:Photo}


{block:Photoset}
<div class="post">
{block:ifnotsmallimages}{Photoset-500}{/block:ifnotsmallimages}{block:ifsmallimages}{photoset-250}{/block:ifsmallimages}
{block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
{/block:IndexPage}

{block:IndexPage}<div class="permalink"><a href="{Permalink}"><br>{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}

{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>

{/block:Photoset}

{block:Quote}
<div class="post">
{Quote}{block:Source}<br>written by <i>{Source}</i>{/block:Source}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Quote}

{block:Link}
<div class="post">
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}{Description}{/block:Description}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}
</div>
{/block:Link}

{block:Chat}
<div class="post">
{block:Title}<b>{Title}</b>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b> "{Line}"<br>{/block:Label}{/block:Lines}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Chat}

{block:Video}
<div class="post">
{block:ifnotsmallimages}{Video-500}{/block:ifnotsmallimages}{block:ifsmallimages}{Video-250}{/block:ifsmallimages}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
</div>{/block:Video}

{block:Audio}
<div class="post">
<div class="audio">
{AudioPlayerBlack}</div>
{Caption}
{block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a>
</div>{/block:IndexPage}
{block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
Posted {TimeAgo} with {NoteCount} Notes 
{block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>

<div class="notes">
{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
{/block:PermalinkPage} 
</div>
{/block:Audio}




{/block:Posts}

</div>
</body>
</html>

Welcome to the Treehouse Community

Looking to learn something new?

Brandon Brigham

Brandon Brigham

Element disappears when zooming in on an iPhone or smartphone

Brandon Brigham

Brandon Brigham

4 Answers

Sarah Stafford

Sarah Stafford

Jacob Mishkin

Jacob Mishkin

Brandon Brigham

Brandon Brigham

Brandon Brigham

Brandon Brigham

Brandon Brigham

Brandon Brigham