bootstrap responsive design under different screen sizes small bug
Question
im new with bootstrap and im trying to make my responsive web using bootstrap, isotope and expression engine. i made my web it working whit the default bootstrap characteristics.the web page respond to different screen sizes, but when the page size its between 480px and 768 px, the page doesnt respond well, with the scroll the pictures move in fron the menu. and i dont want that, i just want that everything move with the scroll.
like:
Before the scroll:
After the scroll:
in the second picture the menu is behind all the pictures, i want to apply the scroll for all the page, not just the pictures.
by the other side i want to use jquery mobile under 480px, i dont know if i need to create another page, or how to handdle that under 480px
some of my code:
<!DOCTYPE html>
<html lang="{country_code}">
<head>
<title>MNT Graphic Design - {if country_code != 'es'}Portfolio{if:else}Portafolio{/if}</title>
<!-- CSS Declaration -->
<link rel="stylesheet" type="text/css" href="{site_url}bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="{site_url}isotope/css/isotope.css" />
<link rel="stylesheet" type="text/css" href="{path='styles/main'}" />
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div id="well sidebar-nav" data-spy="affix" data-offset-top="30" >
<div id="brand">
<a href="{site_url}" title="Inicio"><img src="{site_url}mntgd/images/logo.png" alt="MNT Graphic Design Logo" /></a>
</div>
<div id="navegacion">
<ul class="nav nav-list sidenav" id="filters">
<li class="nav-header">{if country_code != 'es'}MENU{if:else}MENÚ{/if}</li>
<li><a role="menuitem" href="#" data-filter=".img-corp">{if country_code != 'es'}Branding{if:else}Imagen Corporativa{/if}</a></li>
<li><a role="menuitem" href="#" data-filter=".edi">{if country_code != 'es'}Print{if:else}Editorial{/if}</a></li>
<li><a role="menuitem" href="#" data-filter=".web">{if country_code != 'es'}Web Design{if:else}Diseńo Web{/if}</a></li>
<li><a role="menuitem" href="#" data-filter=".photo">{if country_code != 'es'}Photography{if:else}Fotografía{/if}</a></li>
<li><a role="menuitem" href="#" data-filter="*">{if country_code != 'es'}All Works{if:else}Ver todo{/if}</a></li>
<li class="divider"></li>
<li class="dropdown">
<a id="about-btn" class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">MNT Graphic Design<b class="icon-chevron-right"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="about-btn">
<li role="presentation"><a role="menuitem" href="#" >{if country_code != 'es'}About Us{if:else}Nosotros{/if}</a></li>
<li role="presentation"><a role="menuitem" href="#" data-filter=".profile">{if country_code != 'es'}Profiles{if:else}Perfiles{/if}</a></li>
<li role="presentation"><a role="menuitem" href="#" data-filter=".customers">{if country_code != 'es'}Customers{if:else}Clientes{/if}</a></li>
</ul>
</li>
<li class="dropdown" id="options" >
<a id="sort-btn" class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">{if country_code != 'es'}Order by{if:else}Ordenar{/if}<b class="icon-chevron-right"></b></a>
<ul class="dropdown-menu option-set" id="sort-by" data-option-key="sortBy" role="menu" aria-labelledby="sort-btn">
<li role="presentation"><a role="menuitem" href="#sortBy=original-order" data-option-value="original-order" class="selected">{if country_code != 'es'}Original Order{if:else}Por defecto{/if}</a></li>
<li role="presentation"><a role="menuitem" href="#sortBy=by_project" data-option-value="by_project">{if country_code != 'es'}By Project{if:else}Por Proyecto{/if}</a></li>
<li role="presentation"><a role="menuitem" href="#sortBy=by_date" data-option-value="by_date">{if country_code != 'es'}By Date{if:else}Por Fecha{/if}</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a role="menuitem" href="#" data-filter=".contact">Contáctenos</a></li>
</ul>
</div>
</div>
</div>
<div class="isoenv span9">
<div id="container" class="clickable clearfix">
<!--
{exp:channel:entries channel="portfolio" orderby="random"}
<div class="element {channel_short_name} {if sticky == 'y'}pinned{if:else}{/if}" data-project="" data-date="{entry_date format="%Y%m%d"}">
<img src="{portfolio_imagen:thumb2}" alt="{title}" />
</div>
{/exp:channel:entries}
-->
<div class="element photo pinned" data-project="palo1" data-date="20130630">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="6" />
</div>
<div class="element photo img-corp big-format" data-project="palo4" data-date="20100630">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="4" />
</div>
<div class="element photo pinned " data-project="palo1" data-date="20110630">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="5" />
</div>
<div class="element photo img-corp" data-project="palo4" data-date="20170630">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="9" />
</div>
<div class="element photo " data-project="palo4" data-date="19990630">
<img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="3" />
</div>
</div>
</div>
</div>
</body>
thanks for any help u can give me!
Edit:
web link http://www.mntdesign.co/?/main this is the link rigth now, im testing, but i cant find why this bug
1 answers
solution1
1 ACCPTED 2013-06-21 21:32:18
Well, I think I've identified the issue. I hope I can still help!
The problem is the .affix class (specifically, its position:fixed ) that is dynamically added to the menu when you scroll. On larger screens it will look fine - but when you make the screen narrow enough (767px or less), it triggers the mobile layout of Twitter Bootstrap (via media query). This is when the aforementioned position:fixed starts messing up your page.
The mobile layout causes the div containing the images to expand to 100%, but this causes it to overlap the menu, which has a fixed positioning (removing it from the "flow" of HTML, and keeping it in the same place on-screen as you scroll - underneath the images, in this case).
To fix this, you could counter the .affix class with your own media query.
In your main stylesheet, you could add:
@media (max-width: 767px) {
.affix{
position:relative;
margin-top:30px;
}
}
which would cause your menu to maintain its position prior to you scrolling - at the top of the page and still in its flow, where you probably would want it.
Also, on a minor note, I noticed you gave the menu div id="well sidebar-nav" . I suspect this was an error...you'll probably want to move well to the menu's class.
Well, I hope this helped you fix the problem, or at least understand it better. Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.