1

I have a custon class inside my react js render , it's a style to make 3 buttons inline (2 on the right and one to the left) in the same line.

But the buttons are not responsive to mobile and other screens, I tried to put the style in a custom css stylesheet but it didn't work and the buttons didn't show up inline.

Here is my CodeSandBox.

Many thanks

Improve this question

3 Answers 3

Reset to default
1

Please check with the property flex-wrap: wrap on parentStyle. This will make the prev and next buttons move to the next line as you resize. Similarly you can use the same property in this line <div style={{ ...childStyle, justifyContent: "flex-end" }}> as well to move the next button below the prev button if the browser is resized further

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This only move retun buttons on top of next button, but return to main button still the same, can you try on codesandbox please ?
Well, I had to change a lot of lines to get the desired result. Please checkout the forked codesandbox codesandbox.io/s/reactjs-declarative-example-pdw65
Sorry. can you check now?
It's working thanks , is there a way to put next first then return then return to main page when resizing ? (the opposite of the exisitng)
Yes. For that you need to set flexWrap to wrap-reverse. Try this on both the styles. But, please verify on all the browsers wrap-reverse and space-between works correctly
1

Please take a look at this, I want to put each button in new line in this case :

Small screen test

Improve this answer

3 Comments

I don't think you need to worry about a device that is 160px wide - iPhone 5 which has a small screen by today's standards is 320px wide
Is there a solution with code that I can try ? @JonathanIrwin
There is no problem with your code, no one will open your site with 160px width wide ! , as @JonathanIrwin mentioned, minimum width is 320px and your code is working fine there.
0

enter image description here

They seem to line up - what is the problem?

Improve this answer

1 Comment

check my reply with a screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.