If you duplicate the block (even if it's hidden) it will load the content twice. Not a huge deal if it's static HTML, but if it's a lot of promotional images, this could slow down load times.
I found this that might help http://tanalin.com/en/articles/css-block-order/
In theory, use media queries to adjust the display of the content divs. When the viewport gets to mobile size, you'd add display:table to the wrapper (containing x,y,z,1,2,3), display: table-row-group to divs x,y,z,1,3, and display: table-header-group to div 2. (Doesn't work for ie <=8, fyi).
Another option is moving the content around with javascript or jquery clone.
Personally, I'd prefer a purely CSS solution. If the display:table solution doesn't work out, I'd fall back to hiding duplicate content over javascript.
Hope that helps!
Cheers,
Luke Aeschleman
Web / Database Development Librarian
UNC Chapel Hill Health Sciences Library
CB #7585
Chapel Hill, NC 27599
919.966.7637
[log in to unmask]
http://library.ncahec.net
-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of Kaile Zhu
Sent: Friday, October 30, 2015 11:04 AM
To: [log in to unmask]
Subject: Re: [CODE4LIB] CSS positioning expertise needed
We don't know what framework the designer uses. Likely proprietary, modified based on some open sources. So, it is hard for anyone to do some customization, if the hired designer is unwilling to help you.
To me, the easiest way to achieve your goal is to embed some code to detect the viewing device; if desktop, show as is; if mobile, redirect to the similar page with 2 on the top. Visitors don't care you actually provide a different page, or they may not even notice that.
Kelly Zhu | Head of Systems
James C. Jernigan Library
Texas A&M University - Kingsville
phone: 361.593.4082
-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of Kyle Breneman
Sent: Friday, October 30, 2015 9:25 AM
To: [log in to unmask]
Subject: Re: [CODE4LIB] CSS positioning expertise needed
Thanks so much to all who responded! As I said before, I was reluctant to share the full context with the list because I didn't want to share the in-house mock-ups I've received with the entire list. Here's a summary of the question and answers received:
Context: Our library homepage is being redesigned to responsively resize.
The work is being done by an outside design firm. Imagine that our homepage content looks like this, where x, y, z and 1, 2, 3 are all distinct blocks of content on our homepage.:
X Y Z
1 2 3
When this homepage responsively resizes for smaller screens, the content arranges in a column, as below:
X
Y
Z
1
2
3
Problem: "2" is a space where we often post graphics to market upcoming library events, so we wanted "2" to appear at the very top of our page, in mobile view (as below),
2
X
Y
Z
1
3
but the outside design company told us that this wouldn't be possible.
They said: "It’s really a coding issue. When building a page with responsive design in mind, the code is going to stack elements almost like reading a book - top to bottom, left to right to fit the mobile view . . .
We have ["2"] almost at the “end” of content on desktop and sandwiched between to other elements, to pull that up as the very first item for mobile presents issues and may cause the transition between desktop and mobile to break."
Answers received: Multiple people suggested creating a duplicate version of "2," wrapped in a div and at the top of all of our other homepage content, and using media queries to either display or hide this div, depending on the user's screen size. Additionally, we would use media queries to hide the original "2" div when in mobile view.
Much gratitude to Matt Sherman, Jason Bengtson, Marya Sawaf, Cary Gordon, Heather Rayl, Andy Wagner, Lisa Haitz, and Michael Schofield for their helpful responses!
Regards,
Kyle
On Thu, Oct 29, 2015 at 11:21 AM, Kyle Breneman <[log in to unmask]>
wrote:
> Our library is currently working with the public relations department
> at our university to complete a responsive redesign of the library website.
> The redesign is being driven by the PR department, who is contracting
> with an outside design firm for all of the actual coding.
>
> We'd like to make some changes to the order in which our homepage
> content displays when our site responsively resized for mobile, but
> we're being told that the changes we want are not possible. I'm
> pretty certain that what we want can be achieved by CSS positioning,
> but I'd welcome responses, off-list, where I can share more details
> and get a better understanding of what code would be needed to achieve our objectives.
>
> Regards,
> Kyle Breneman
> Langsdale Library
> University of Baltimore
>
|
