Skip to content
Submitted over 3 years ago

Mobile first, Flexbox and some javascript

Rajnish Deshmukh•200
@drajnish
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Room homepage
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Struggling with positioning

I'm struggling to fix the position of slider arrow want to fix it so it stays with slider div currently it changes its position as the size of the screen changes. i am using position=absolute w.r.t. carousal div

or any other option to fix it.

Any suggestion? Thanks

Community feedback

  • Veronika Palto•305
    @JepardMayPosted over 3 years ago

    Hello. You've done a great job with this one.

    I have a suggestion for your problem that you can try. Add overflow: hidden to your slider-container and add bottom: 0, left: 60vw (as image container width) for btn-container. For mobile add right: 0 and remove left. As images have no content, that can be changed, you can add height to the image and align the btn-container's top or bottom to this height.

    Marked as helpful
    1
    Rajnish Deshmukh•200
    @drajnishPosted over 3 years ago

    @JepardMay Thanks for your help it works for me.

    Can you please help me out one more time.

    In report section they say accessibility issue

    [

    1. Document should have one main landmark

    Context:

    <html lang="en"> Learn more
    1. All page content should be contained by landmarks

    Context: <img src="images/logo.svg" alt="Logo" class="logo"> Learn more ]

    There are 4 more warnings.

    I am unable to understand what they means. Please help me.

    Thanks in advance.

    0
    Veronika Palto•305
    @JepardMayPosted over 3 years ago

    @drajnish Hello. I can't say for sure, what to do, but

    • add main tag on your page,
    • add header and footer if you need it,
    • add headers to all sections (if there're no heading in the section add visually-hidden header),
    • make sure that you use links correctly and use buttons if you need it (if element interactive - it's a button; if it looks like a link but does not direct you anywhere - it's a button too)

    I think it could fix most of the errors.

    0
    Rajnish Deshmukh•200
    @drajnishPosted over 3 years ago

    @JepardMay Thank you so much for your suggestion, Surely I will work on it.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord