Latest solutions
Responsive Galleria website with Express and EJS
#accessibility#express#sass/scssSubmitted over 1 year ago
Latest comments
- @emestabillo@marcus-hugo
Hey Emmilie, I've been googling javascript for a basic carousel, and all the tutorials are very complicated, but, your solution is so concise! I couldn't understand how to implement the logic and I've been studying your solution and wondering how the slideIndex gets updated with each click?
I think I understand. Is it because slideIndex is a variable that gets updated with each
onclick="plusSlides(1)
oronclick="plusSlides(-1)
? - @ApplePieGiraffe@marcus-hugo
I've been reworking my solution and saw that yours has no javascript and that you used the
details
andsummary
elements, which I didn't know about!I really like the animations on load too!
- @mdajmalshadab@marcus-hugo
Looks really good! I had the same thing happening and what worked for me was,
background-position: 0 0; background-size: auto 100vh;
- @LoganWillaumez@marcus-hugo
Desktop looks great! I like the animations too! for the mobile background image, instead of
body::after
you could try usingbackground-image
with the svg url. This is what worked for me,background-image: url(../images/bg-mobile.svg); background-repeat: no-repeat; background-position: center 0px; background-size: contain;
Marked as helpful - @Infinit-dot@marcus-hugo
Looks great! I really like the animations!
- @samandavari@marcus-hugo
Looks good!
For the box svg , add it to the html before the div
.image
, then in the css set it toposition: relative
and position it withtop:
andleft:
like thisdisplay: inline; position: relative; left: -177px; top: 282px;
Try removing the heights from the
.wrapper
and.accwrapper
, that should keep it from popping out of the wrapper.For hiding the images, it looks like you could add the bg-pattern to the
.image
div and then set it toposition: relative
andz-index: -1
, andoverflow: hidden
, though I'm not sure it will work?I ended up using
background-image:
withurl()
.background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg); background-position: -76px, -571px -248px; background-size: 472px, 966px; background-repeat: no-repeat;
Hope this helps! Happy coding!