I am designing a website for my client. I am stuck in responsiveness of a page here is the link: http://luberack.surge.sh/. here what I want in the slider section the content that boxes should scroll over the slider the boxes should not exceed the height of the slider image it should be inside and scroll over the slider on the mobile screen.
Responsive, I find it hard to get a grip of the issue with only your description of how the boxes should behave.
Could you please provide a guest login, or else bypass the sign-up and link to the same page as your screenshot?
As a visitor I don’t have access to see those boxes, and I don’t want to register an account or dive in to the source code just to see what you have so far.
I think you misunderstand what the forums are for @awaiszaki14. People will help you with your issues, but don’t expect them to do your work for you.
I looked at the page that you linked to and didn’t see anything resembling a slider or responsive code. Do we need a login? Perhaps you need to describe where we should be looking.
I think you’ll find that most members are, quite rightly, reluctant to download zipped files from an unknown source. Likewise, nobody wants to have to register and log in to look at your code.
I’d suggest that either you create “test” login credentials we can all use (and which you can, of course, delete once your issue has been dealt with) or post the problem page somewhere where we do not need to log in to see it.
Unfortunately you have a flawed construct even for bootstrap.
You have set the image to 1200px height and then absolutely placed some content on top of the image. If the content is greater than 1200px (which it will be when it wraps) then your content overflows the image and the rest of the page.
What you should have done is placed the image as a background (background-size:cover) to the content and let the content dictate the height (or have a min-height).
I see no easy solution to this other than giving your main-text element a height of 1150px and setting its overflow to auto which will look a little messy. Alternatively hide the image on smaller screen altogether and remove the absolute positioning to put everything back in the flow.
A re-design of that section is required with more thought about how to make it responsive to start with rather than trying to squeeze stuff into bootstrap sliders and hoping for the best