cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Responsive footer - Need help setting stacking order.

kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018

Hey all,

Below is a page I'm working on. How can I set the stacking order of each block? for instance I would like both secondary nav sections to be at top and so on.

One more question... Is there a way to get the bootstrap button at the bottom to align better with the vertical line when media size changes?

Thanks in advance for any help!!

Here is the link:

Executive Insights from Premier – Spring Edition

985
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

osgood_
LEGEND , Aug 27, 2018 Aug 27, 2018

Seriously, that code is a crock of shite.......hummm I'm losing the will to live here. Anyway I digress.

If you find the media query code (see below) in your page and alter it as shown your divs will re-order themselves at tablet size.

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

.footer-distributed{

display: flex;

flex-direction: column;

font: bold 14px sans-serif;

}

.footer-nav {

order: 3;

}

.footer-left {

order: 4;

}

.footer-address {

order: 5;

}

.

...
Translate
replies 11 Replies 11
latest latest Jump to latest reply
ALsp
Mentor ,
Aug 27, 2018 Aug 27, 2018

Dumb question...

Why would you think this is a Dreamweaver support issue? Have you tried contacting the people who developed the framework you are using?

Just curious.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
In Response To ALsp

I'm using iON Interactive. This is a "code block" I placed on the page that I wrote. So it really doesn't have anything to do with the framework. I plan on using this footer on other pages outside of iON.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Aug 27, 2018 Aug 27, 2018

Seriously, that code is a crock of shite.......hummm I'm losing the will to live here. Anyway I digress.

If you find the media query code (see below) in your page and alter it as shown your divs will re-order themselves at tablet size.

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

.footer-distributed{

display: flex;

flex-direction: column;

font: bold 14px sans-serif;

}

.footer-nav {

order: 3;

}

.footer-left {

order: 4;

}

.footer-address {

order: 5;

}

.top {

order: 6;

}

You also need to add the 'top' class to your center tag (see below) for your back to top image in the footer, not sure why your using the <center> tag, my head is spinning.....I guess these frameworks or whatever school of learning are real progress.

<center class="top">

<img style="margin:0 auto;display:block;margin-top:45px;margin-bottom:10px;padding-left:8px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/scroll.png" alt="LineItemDetails" height="40" width="40"></center>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
In Response To osgood_

Ya their code is a little wacky lol. Breath... Don't want you to keel over on my account. Pretty cool platform though. Take a bunch of work out of backend stuff. We mainly use them for real time interactive assessments. You can plug in all the code you want.

I will give your suggestions a shot and get back.

Thanks!!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
In Response To osgood_

Hey there that worked. Thanks. As far as the arrow staying in line with the vertical rule how could I accomplish that?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
osgood_
LEGEND ,
Aug 27, 2018 Aug 27, 2018
In Response To kineticcreative123

kineticcreative123  wrote

Hey there that worked. Thanks. As far as the arrow staying in line with the vertical rule how could I accomplish that?

It doesnt look enough off-center to me to worry about.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
LATEST
In Response To osgood_

Will do. Thanks Osgood.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Aug 27, 2018 Aug 27, 2018

Fix your code errors, you have some critical ones starting with 2 doc types and <html> tags on or around line 106.  Doctype and <html> tags must go at the very top of your page.   Plus many more...

Showing results for http://explore.premierinc.com/exec-communication-temp - Nu Html Checker

I can't say I'm wild about the code you're using.  It almost makes Muse generated code look really good (sarcasm).

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
In Response To Nancy OShea

Ya that code is generated by the platform. I know it's wacky. These are the people: ion interactive Content Marketing Solutions

I used Muse once. Thats too funny. And I mean once. Worst piece of software ever built. EVER.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
ALsp
Mentor ,
Aug 27, 2018 Aug 27, 2018
In Response To Nancy OShea

It's not far off from Bootstrap, actually - at least in terms of CSS bloat 😉

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
kineticcreative123
Contributor ,
Aug 27, 2018 Aug 27, 2018
In Response To ALsp

Very true. Lines and lines and...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices