I have drawn a horizontal line with a text at the beginning. This line is responsive to the text. Now I want to add a div to get counts of carousel at the end of the line and want it to responsive to the line using css.
I am doing as below but is not working
I want something like this: Donate Clothes-------------------------------------------------- <div>for count here
and when the line resize, the div for the count also resize as well
Put a div for count of item at the end of a horizontal line using css
codepen can be found here. I want the whole line “Text-------------------------------------------------- div” responsive
Correct. I have just tried your code but it doesn’t work on my end. My code works by drawing a response line. I just want the text at the end to be responsive with the line
I think I’m being a bit thick tonight but I’m sorry I don’t follow. I thought you wanted words at either end and a line in the middle that takes up the rest of the space?
Do you mean you want to manually set the line to a percentage width and have the text at the end keep track at the end of the line?
e.g.
I don’t think I understand what you want properly I’m not sure what you mean by responsive in this scenario.
My test------------------------------------------------------div for a count of carousel.
My test------------------div for a count of carousel.
My test-------div for a count of carousel.
The whole Start text with line in between to end should shrink based on the media scale
I need only one line. I was just showing how I want it to resize base on the device
Just one line but be able to resize based on the device. I am trying @media screen and (max-width: 900px)
The code is working in the codepen. Do you not see the codepen working?
If the line doesn’t show in your page then you may have copied it incorrectly or you are placing in a context that I don’t know about. I’d need more information to debug. Can you show me a codepen demo of where my code isn’t working?
I was just showing you that the line was responsive and would stretch depending on content and viewport size. Its the same code for all the lines apart from the last 2 where I set a width on the parent to show it didn’t matter what the width would be. (Anyway the animated example should show you that it works across every range. I guess I really don’t understand exactly what you want. It’s probably my fault.)
The code I gave does that as shown by the screenshots above. What is it that the codepen does not do for you?
The code I gave you will work at 900px max-width and less or more. In fact the code I gave you will scale from 300px up to infinity.
I’ll be back tomorrow and take another look but someone else might like to jump in now as I think I’m stuck down a rabbit hole at the moment
I believe I have already given you the exact solution you require that will work in a structural way without resorting to absolutely positioning items which will be a nightmare to control in a responsive situation.
Absolute elements are removed from the flow so you cannot automatically make another element react to the absolute element without some sort of trickery.
If you can explain why my solution does not fulfil your requirements then we can work towards a structural solution and not some magic number hack.
Beginners nearly always use absolute positioning in the wrong situation. It may indeed be possible to use absolute positioning to achieve what you want but would rely on certain conditions to be met. Therefore it is better to use a method that automatically adjusts to content and remains in the flow of the document and reacts with other content in the normal way.
I have asked several times now why the code in my original codepen does not do what you want but you have failed to give me an answer. All you said is that the line doesn’t even show when it clearly can be seen in the codepen and in every screenshot!
Unless you can explain what I seem to be missing in my solution then I’m going to have a very hard job trying to help you
Just to confirm that your codepen works as advertised for me.
I too am waiting to hear from the OP in what way your codepen does not fulfil their requirements and also to see their code after adapting it as per your Codepen.
I’m not sure what you mean by responsive in this scenario.
