score:1
unfortunatly was on mobile while making comments, so making a snippet would have been awkward.
so here is an example of using flexbox, if you look it also makes the markup simpler too. it's this sort of layout that flexbox is very useful for. no need for height 100% etc, or wrapper div's.
.todolist{
background: #283048; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #859398, #283048); /* chrome 10-25, safari 5.1-6 */
background: linear-gradient(to right, #859398, #283048); /* w3c, ie 10+/ edge, firefox 16+, chrome 26+, opera 12+, safari 7+ */
padding: 2px;
margin: 10px;
display: flex;
margin-left: auto;
margin-right: auto;
color: snow;
transform: skew(20deg);
text-align: center;
}
.todolist h3{
flex: 1;
transform: skew(-20deg);
letter-spacing: 2px;
display: inline-block;
}
.todolist {
width: 50%;
}
<div class="todolist">
<h3 >make coffee</h3>
<button>edit</button>
</div>
<div class="todolist">
<h3 >make tea</h3>
<button>edit</button>
</div>
<div class="todolist">
<h3 >make orange juice</h3>
<button>edit</button>
</div>
score:0
so, i have found a better solution. now my button is taking equivalent height to its div at every screen size, and my div height is increasing according to its content. i have updated the .btn class with position property which sync's my button height with that of div.
.btn{
float: right;
position:absolute;
top: 0;
bottom: 0;
right: 0;
}
and added a margin for not hiding text beneath the button
.todolist h3{
transform: skew(-20deg);
letter-spacing: 2px;
display: inline-block;
/* margin is added to shift text onto new line instead of hiding it beneath the edit button */
margin: 5px 25px;
}
and added a media query
@media only screen and (min-width: 500px) {
.todolist {
width: 50%;
}
}
score:1
the problem is actually in your css. when the screen becomes smaller no room is left for the todolist and button in skew 20 degrees. if you remove the width: 50%;
rule and use text-align: center;
you will get a perfect result.
.todolist{
background: #283048; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #859398, #283048); /* chrome 10-25, safari 5.1-6 */
background: linear-gradient(to right, #859398, #283048); /* w3c, ie 10+/ edge, firefox 16+, chrome 26+, opera 12+, safari 7+ */
padding: 2px;
margin: 10px;
display: block;
margin-left: auto;
margin-right: auto;
color: snow;
transform: skew(20deg);
height: 3rem;
text-align: center;
}
.todolist h3{
transform: skew(-20deg);
letter-spacing: 2px;
display: inline-block;
}
.btn{
float: right;
height: 100%;
}
.btn button{
height: 100%
}
@media only screen and (min-width: 600px) {
.todolist {
width: 50%;
}
}
<div class="todolist">
<h3 >make coffee</h3>
<div class="btn">
<button>edit</button>
</div>
</div>
<div class="todolist">
<h3 >make tea</h3>
<div class="btn">
<button>edit</button>
</div>
</div>
<div class="todolist">
<h3 >make orange juice</h3>
<div class="btn">
<button>edit</button>
</div>
</div>
Source: stackoverflow.com
Related Query
- Button goes out of its div when screen size becomes smaller
- Absolutely positioned Div goes out of the screen when the width of the screen gets small
- Why is my div draggable on a smaller screen, but when I inspect it on a larger screen I'm no longer able to drag it?
- Grommet ResponsiveContext : custom breakpoints not making text smaller when screen size reduced
- Wix React native navigation tab button goes out of bound on navigating back to screen
- Scrollable div to stick to bottom, when outer div changes in size
- How to get key attribute of parent div when button is click in ReactJS
- How do I fix the position of an input so it's always below an element that's centered on the screen but its size can change?
- How to Show div when a Radio Button is Clicked in React
- React: How to Animate Expanding and Collapsing Div When the Size of the Content is Not Knowable
- React JS App becomes blank white screen when deployed with AWS Amplify
- In React a div has an height of a zero, then why its children are still showing on the screen
- onScroll when at the bottom of the div then disable button
- Show a returned object on a div when button is clicked using React
- How to remove (only) the parent element when screen size < 875px in React?
- How to add or remove a className when screen size change in react
- When i click one button its open all buttons simultaneously
- React material table losing its sorted state when i click a button in custom column rendering (any state update will cause this issue)
- When I click cancel button in react why the page is reloading and why its path also changing in react?
- Fade out animation when closing a screen with React and CSS
- Hide div with buttons when user uses a touch screen in a functional react component
- How to blur out an entire webpage when a button is clicked
- Chakra-UI - how to modify ButtonGroup when screen becomes small?
- Make a sidebar slide from the left side of the screen when a button is clicked with Tailwind CSS
- Getting Uncaught Error: Invalid offset NaN specified on React-virtualized when my width is smaller than my item size
- How to hide a parent div and replace it with another div when user clicks on a button that is a children of the parent div?
- How to make a div scroll to the bottom of its container then scroll back up when it's done in React?
- How can strike a post out when i click the complete button in React
- How to get a image width when screen size changes in react?
- Semantic UI React - floated button coming out of its container?
More Query from same tag
- material-ui jss-rtl - after using jss-rtl my page is still LTR
- Undefined parameter used within function
- React button active style
- When to update state or return action.payload for redux thunk extra reducers?
- How to listen to redux action stream in component
- First React-Bootstrap Radio Button Click is not triggering "touched" in Formik Form
- How to use ts-nameof with create-react-app or craco?
- React-Lightbox Image
- How would I change the state/setState of an object nested in an array of an object in an array?
- npm start & npm run build not working | React App
- How to Format React Form Submission Before API Gets Payload
- React get updated props after submit and dispatch
- How to detect if React Material UI Select Field is expanded?
- setState in React based on current state
- How can I make AutocompleteInput or SelectArrayInput scrollable?
- React Router v5 not redirecting in my website
- React Typescript createContext types issue
- Using filter with ProTable in Ant Design
- Update Recoil state from async function
- Render a React Component Using Multiple Ternary Operator
- How to Integrate Google Calendar API with React JS?
- Material-UI Disabled attribute not working
- React — inline onfocus placeholder = ''
- AutoFocus an input element in react JS
- filtering through an array of JSON objects by UI
- React build showing blank page
- Same size on gallery cards in TailwindCSS
- Why aren't {...props} necessary when passing them to a component in a router in React?
- How to disable the react leaflet zoom
- How do I mock and test MaterialUI - makeStyles