Top Box with Drop Zone Phone # and Pin Stack Phone #


(Lisa Sandler) #1

Because I like to make things difficult for myself, I’ve set up something that is not quite working.

I’m using Foundation. https://www.lisasandlerphotography.com/details/. File is here: https://www.dropbox.com/s/uulcy9yijmaqfnl/tests-2017.rw.zip?dl=0

I have a phone # set up in the Drop Zone for my full menus, which is on desktop and landscape iPad.
I’ve hidden that for the portrait iPad and iPhone, and added a Pin Stack for the Phone.

It’s not working well. It doesn’t switch back and forth between landscape and portrait without refreshing.
It’s also showing the Drop Zone in these views as well.

@joeworkman @tav @zeebe can one of you please help? I’m obviously trying to do too much and RW doesn’t like it :frowning:

thanks, Lisa



(Andrew Tavernor) #2

The problem is that you have used the Stacks responsive hide controls. This does a simple display: none so the Pin stack has zero size above the breakpoint.

When the page loads, the Pin positioning calcaulations will work on this zero size. As you then rotate your device to below the breakpoint it will suddenly appear but still be positioned according to the zero size calculation.

This is why Pin has its own Hide setting, either above or below its custom breakpoint.

If a stack has its own setting for this function it is most likely because it needs to do things in a more controlled way than just display:none and it is worth using theses specialised settings.


(Lisa Sandler) #3

Andrew @tav -
Ah, I remember now why I didn’t do that. I started out that way, but would need it to not show up on iPhone, or larger screens, only on iPad. So I couldn’t figure out how to set both above and below with the breakpoints.

Is there a way to add blank spaces or a blank box or push the menu to the left in Top Box? and just have the Pin stack for all screens except iPhone?
thanks


(Lisa Sandler) #4

ok, I might have figured this out. Stay tuned :slight_smile:


(Andrew Tavernor) #5

It is pushed to the right because of the zero size problems as above. If you refresh the page on a smaller screen when it is visible it is positioned correctly.

Its bed time for ducks so I’ll check back on this in the morning and see what you figured out.


(Lisa Sandler) #6

arg. I give up. I spent 2 hours trying to get this to work. If you can help me out with my file, I’d appreciate it. I tried putting the pin inside the drop zone and it jumps all over the place. I tried left, right, centered with the menu and I just can’t get the right combo of settings.
https://www.lisasandlerphotography.com is the only page published.
thanks


(Lisa Sandler) #7

Honestly, at this point I’d just like the Top Bar Drop Zone to show up in Portrait Tablet view. I got rid of the extra Pin stack and it all seems to be working except for tablet landscape. New file replaced old one. Home page is published. https://www.dropbox.com/s/uulcy9yijmaqfnl/tests-2017.rw.zip?dl=0


(Andrew Tavernor) #8

I think this is a good idea, and we can make it very simple with just a couple of lines of CSS. We will hide the zone first and then selectively show it between two breakpoints:

.top-bar ul.zone{
display:none!important
}

@media screen and (min-width:640px) and (max-width:1024px){
    .top-bar ul.zone{
       display:block!important
    }
}

The only real question is what is tablet portrait size. Just adjust the minimum and maximum width values to suit. You will inevitably catch other devices due to the huge variety of screen sizes but these numbers may help in deciding:


(Doug Bennett) #9

Lisa,
On your site page above (with phone number) your top-bar breaks to another line at about 850px:

Your hamburger menu does not appear until about 780px. If you use @tav’s code above you will still get the phone number on the drop down menu from the 780px down to the 640px:


(Lisa Sandler) #10

Yes, I see that. I cannot figure this out no matter what I do. Even if I just use one top bar and one drop zone, it still shows in the hamburger menu drop down. Care to look at the file and see if you can make it work? Using foundation and Big White Duck stacks. https://www.dropbox.com/s/8n97ocrgngsdg7f/tests-2017.rw.zip?dl=0


(Doug Bennett) #11

OK Took a look. The test project file has a bunch of top bars in it. I just worked on the one on the top. In fact, I deleted the others as they had different break points.

It looks like you are setting the breakpoint for top-bar to 840px, is that correct?

If so try this:

In your page level CSS you have a couple @media querries still set to 780px change them to 840px.

@media only screen and (max-width: 840px) {
  li.parent-link.hide-for-medium-up {
    display: inline-block !important;
  }
  .top-bar .top-bar-section li {
    border-bottom: 1px solid #900;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(153, 0, 0);
}
}

on the last one you were missing the last ending bracket:

@media screen and (max-width: 840px){
.com_stacks4stacks_stacks_lister_stack *{
 font-size: 1.25rem!important
}
}

Now add this to the bottom to get ride of the phone on the drop down:

@media (max-width: 840px) {
  ul.zone {
  display: none;
  }
}

Or if you want you can combine the media querries into a single by replacing your Site CSS with:

.dropdown li { border-bottom: 1px solid #900;}

.dropdown li:last-child { border-bottom: none;} 

 @media screen and (max-width: 40em) { 

.top-bar li { border-bottom: 1px solid #900;} 

.top-bar li:last-child { border-bottom: none;}  

} 

.top-bar-section ul li > a { font-weight:600 }


.poster-archive-tags a {
color: #3b5998;
}

.bullet-point {
	border-radius: 4px !important;
}

.nivo-controlNav a {
	border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important;
}

.blog-entry-body {
	border-bottom: 2px solid #808080;
	padding-bottom: 16px;
	padding-top: 16px;
}
.blog-entry-tags a {
color: #3b5998 !important;
}

.com_stacks4stacks_stacks_lister_stack *{
 font-size: 1.25rem!important
}

@media only screen and (max-width: 840px) {
  li.parent-link.hide-for-medium-up {
    display: inline-block !important;
  }
  .top-bar .top-bar-section li {
    border-bottom: 1px solid #900;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(153, 0, 0);
  }
 ul.zone {
  display: none;
  }
  .com_stacks4stacks_stacks_lister_stack *{
 font-size: 1.25rem!important
  }
}

You have one other media Querry at 40em (640px) at the top, not sure what that was for.


(Doug Bennett) #12

The query at 40em adds a border to the bottom.
Less than 40em:

Greater than 40em:


(Lisa Sandler) #13

Doug-
So I have since gotten rid of all the extra sizes, as you did. I quickly had pasted it into the 2nd page of the test file, not remembering that it wouldn’t work because it was in the same partial.
I’m working my way through your suggestions on my code and will get back to you.
thanks again :slight_smile:


(Lisa Sandler) #14

I think the media Query was for the drop down menu lines from Joe.


(Doug Bennett) #15

Yeah, you got that (lines for drop down) covered twice. once at 840px and once at 40em:

If you take out the 40 em one the only difference is the bottom border without the drop down.


(Lisa Sandler) #16

I think I screwed something up. Can you please update the code you gave me to replace my master code? with the correct setting so I don’t have things twice?

ooh I think I got it… just deleted the first set? Nope that got rid of the lines :frowning:

indent preformatted text by 4 spaces

.dropdown li:last-child { border-bottom: none;}

@media screen and (max-width: 40em) {

.top-bar li { border-bottom: 1px solid #900;}

.top-bar li:last-child { border-bottom: none;}

}


(Doug Bennett) #17

Try this:

.dropdown li { border-bottom: 1px solid #900;} 

.dropdown li:last-child { border-bottom: none;} 


.top-bar-section ul li > a { font-weight:600 }


.poster-archive-tags a {
color: #3b5998;
}

.bullet-point {
	border-radius: 4px !important;
}

.nivo-controlNav a {
	border-radius: 4px !important;
	-moz-border-radius: 4px !important;
	-webkit-border-radius: 4px !important;
}

.blog-entry-body {
	border-bottom: 2px solid #808080;
	padding-bottom: 16px;
	padding-top: 16px;
}
.blog-entry-tags a {
color: #3b5998 !important;
}

.com_stacks4stacks_stacks_lister_stack *{
 font-size: 1.25rem!important
}

@media only screen and (max-width: 840px) {
  li.parent-link.hide-for-medium-up {
    display: inline-block !important;
  }
  .top-bar .top-bar-section li {
    border-bottom: 1px solid #900;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(153, 0, 0);
  }
 ul.zone {
  display: none;
  }
  .com_stacks4stacks_stacks_lister_stack *{
 font-size: 1.25rem!important
  }
}

(Doug Bennett) #18

That scrolls on the form so make sure you get it all.

That way if you need to change your top bar breakpoint you only have one media query to change.


(Lisa Sandler) #19

You’re so awesome with code, Doug :slight_smile:
This seems to work, but I was wondering if I could get the phone # to show up on portrait iPad with the hamburger menu. Is this possible or should I give up? Published home page: https://www.lisasandlerphotography.com


(Jason Bostick) #20

I reaffirm my request that @teefers offer a master class in his CSS process at the next Rapidweaver Conference