Check out this website (created using Zurb Foundation Framework) where, on screens wider than 425px, there is a row of books displayed on a background image resembling a bookshelf within a specific div element.
However, when viewing the page on a phone or a smaller browser window with a width below 425px, the background image disappears and the inner divs transform into separate rows for each book.
This is achieved through CSS styling:
#homeBookshelfRow {
margin-top:50px;
background:url(../img/homepage/hmpg-mini-shelf/hmpg-shelf.png) bottom center no-repeat;
height:160px;
padding:19px 0 0 11px;
text-align:center;
}
#homeBookshelfHeadline {
display:none;
}
.phoneBookGroup {
margin:0;
padding:0;
display:inline;
}
#homeBookshelfRow .phoneBookGroup .homebook {
padding-right:10px;
cursor:pointer;
}
Additionally, there are styles defined based on the screen width:
@media only screen and (max-width: 425px) {
#homeBookshelfRow {
background:none;
height:auto;
margin:0 0 20px 0;
}
#homeBookshelfHeadline {
display:block;
font-family: 'Open Sans Condensed', sans-serif;
font-size:2.25em;
color:#b11717;
padding:0;
margin:0;
}
.phoneBookGroup {
display:block;
margin-bottom:10px;
}
}
The HTML structure responsible for displaying the books is organized in such a way to adapt to different screen sizes:
<div class="row" id="homeBookshelfRow">
<p id="homeBookshelfHeadline">
Bookshelf
</p>
<div class="phoneBookGroup">
<img src="/bookshelf/HCcovers/21_199.jpg" alt="Justice for Sara" width="88" height="141" rel="21" data-urlname="Justice-for-Sara" class="homebook">
<img src="/bookshelf/HCcovers/22_199.jpg" alt="Storm Season" width="88" height="141" rel="22" data-urlname="Storm-Season" class="homebook">
<img src="/bookshelf/HCcovers/23_199.jpg" alt="Wishing Moon" width="88" height="141" rel="23" data-urlname="wishing-moon" class="homebook"></div>
<div class="phoneBookGroup">
<img src="/bookshelf/HCcovers/18_199.jpg" alt="Watch Me Die" width="88" height="141" rel="18" data-urlname="Watch-Me-Die" class="homebook">
<img src="/bookshelf/HCcovers/19_199.jpg" alt="Slices of Night" width="88" height="141" rel="19" data-urlname="Slices-of-Night" class="homebook">
<img src="/bookshelf/HCcovers/17_199.jpg" alt="Blood Vines" width="88" height="141" rel="17" data-urlname="blood-vines" class="homebook"></div>
<div class="phoneBookGroup">
<img src="/bookshelf/HCcovers/16_199.jpg" alt="Breakneck" width="88" height="141" rel="16" data-urlname="breakneck" class="homebook">
<img src="/bookshelf/HCcovers/24_199.jpg" alt="Chances Are" width="88" height="141" rel="24" data-urlname="chances-are" class="homebook">
</div>
</div>
The page functions correctly initially, but after Ajax calls update the book images and sidebar content, the width-specific CSS rules get overridden by default rendering styles in all browsers.
To address this issue and ensure consistent styling, you may need to revisit how the CSS is applied and possibly adjust the script handling the AJAX requests accordingly.
$('.homebook').click(function() {
var id = $(this).attr('rel');
var urlname = $(this).attr('data-urlname');
$('#bigHomeBook').attr( 'src' , '/bookshelf/hmpg-mini-shelf/large/'+id+'.jpg' );
$('#bigHomeBookLink').attr( 'href' , '/bookshelf/' + urlname );
$.ajax({
url: 'inc/home_book_ajax.php?bID=' + id,
success: function(data) {
if (data == 'bad') {
} else {
$('#rightSidebar')
.html('')
.addClass('reviewRed')
.html(data);
}
}
});
});