Page 1 of 1
*SOLVED* Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 5:11 am
by etcbbu
Hi all,
Got a website going here:
https://travisangelinajones.com
Scroll to the Carousel of 5 images that rotate.
For some reason, on the
- 1366 Breakpoint
- 1024 Breakpoint
The whole Carousel object works great, and has the "Left" and "Right" menu-controls *as well as* the ellipses circles, whereby the end-user can click/tap the bubbles to go to the 5 different pictures.
But for some reason, on the
- 768 Breakpoint
- 320 Breakpoint
While we have the Left-and-Right Controls on the Carousel, for some reason, the ellipses circles just disappear! Why?! I know I'm missing something, but jeez..? I just don't get why they just CEASE, from 768-Width-And-Smaller..
--etcbbu
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:23 am
by Pablo
To be able to help you, I need a DEMO project so I can see all your settings.
Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.
Please see this FAQ for further details:
viewtopic.php?f=10&t=82134
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 5:40 pm
by etcbbu
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 6:33 pm
by Pablo
For me, your project works with the latest version of WWB (17.1.2).
Make sure that the software is up-to-date.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 6:52 pm
by etcbbu
Wait—what do you mean, "for me your project works?" My .WBS opens-up fine for me, too.
I'm talking about a problem whereby the ellipses disappear on the
- 768 Breakpoint
- 320 Breakpoint
of this page:
http://travisangelinajones.com/index.php
out there on the Web, when the project is LIVE, on that image Carousel with 5 images..?
--etcbbu
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:09 pm
by crispy68
It's due to the fact the top margin of the pagination dots is set to 548px (based on the default height). On the smaller breakpoints it pushes them down past the slider. I don't see any change in the code in the breakpoints to keep them centered vertically.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:17 pm
by etcbbu
@crispy68 — that seems really plausible, and I knew it was some spacing/sizing thing like that. Thank you for inentifying it. How can I push-back on that? Like, how would I troubleshoot that? Basically, duplicate a new Carousel and "Hide" this new duplicate Carousel on the
- 1366 Default Breakpoint
- 1024 Breakpoint
and change some sort of ellipsis setting on this new Duplicate Carousel object that'll be for the smaller breakpoints? Just have the page load 2 different carousels based on whichever Breakpoint it's loading?
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:19 pm
by crispy68
I would not duplicate it as this will cause code bloat and is unnecessary. There is some simple CSS code that could be added to fix it temporarily for each BP but ultimately Pablo will need to look at this and fix it in the program.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:24 pm
by crispy68
You could add the following CSS to a code object between the <head> tags:
Code: Select all
<style>
@media only screen and (min-width:1024px) and (max-width:1365px){#wb_travisangelinajonesindexCarousel1 .pagination{margin-top:242px;}}
@media only screen and (min-width:768px) and (max-width:1023px){#wb_travisangelinajonesindexCarousel1 .pagination{margin-top:199px;}}
@media only screen and (max-width:767px){#wb_travisangelinajonesindexCarousel1 .pagination{margin-top:135px;}}
</style>
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 7:55 pm
by crispy68
To which object do I attach that code? The Carousel itself?
No. You add it to a code object with type set to between the <head> tags.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 9:21 pm
by Pablo
Note that in the latest version of WWB you do not need this code.
In WWB 17.1.2, the carousel no longer uses 'margin-top' for pagination.
Make sure that the software is up-to-date.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 9:33 pm
by crispy68
@pablo, sorry didn't see your note about it working with latest update.
Re: Why the little Built-In ellipses disappear @ 768
Posted: Fri Jan 14, 2022 10:12 pm
by etcbbu
still cuttin off a little bit on my 320 Breakpoint. What should I do?
Re: Why the little Built-In ellipses disappear @ 768
Posted: Sat Jan 15, 2022 9:16 pm
by etcbbu
