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

LSPhoto · 7 June 2017 21:44

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: Dropbox - File Deleted - Simplify your life

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

thanks, Lisa

tav · 7 June 2017 22:21

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.

LSPhoto · 7 June 2017 22:34

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

LSPhoto · 7 June 2017 22:40

ok, I might have figured this out. Stay tuned

tav · 7 June 2017 23:07

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.

LSPhoto · 8 June 2017 00:41

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

LSPhoto · 8 June 2017 01:31

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

tav · 8 June 2017 10:42

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:

teefers · 8 June 2017 16:41

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:

LSPhoto · 8 June 2017 16:52

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

teefers · 8 June 2017 18:59

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.

teefers · 8 June 2017 19:48

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

Greater than 40em:

LSPhoto · 8 June 2017 20:18

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

LSPhoto · 8 June 2017 20:19

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

teefers · 8 June 2017 20:26

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.

LSPhoto · 8 June 2017 20:37

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

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;}

}

teefers · 8 June 2017 20:44

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
  }
}

teefers · 8 June 2017 20:46

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.

LSPhoto · 8 June 2017 20:54

You’re so awesome with code, Doug
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

jabostick · 8 June 2017 20:55

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

Topic		Replies	Views
Moving Box 2 breakpoints Stacks joeworkman	4	698	31 May 2017
Hide this stack on a iphone x and 8 plus in foundry? Classic	5	460	6 May 2019
Top Bar settings Stacks bigwhiteduck , foundation	25	1590	24 April 2017
Top bar drops down a line when moving between breakpoints Stacks foundation	6	581	27 April 2018
Top bar with just a menu button pointing to a menu page Stacks	9	1017	30 May 2016

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

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

Related topics