hey i am super new to react and redux and i am following a youtube video to make an app and i came across a part where i have to use custom css for a section. i followed the step exactly in the video but it didn't seems to work.
it seems like the overflow : hidden; and all other lines are simply not working. can anyone help me
this is how the frontend is looking but the "Content" should be in center. Please can anyone suggest anything.
Note: already tried to install "styled-components" many time but it doesn't help.
To center your text you should do:
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100vh;
width: 100vw;
This will make the container use your entire browser window size and then center it's contents.
Try inspecting your browser window to see how your container is sized.
Related
Have CKEditor 5 working in ReactJS. However, need the ability to make the entire editor resizable so content can be expanded for larger screen sizes. I have made attempts with CSS resize without success.
For example:
.ck-editor__editable {
min-height: 20vw;
height: 100%;
resize: both;
overflow: scroll;
}
Also, I have tried adding resize and overflow on the parent DIV to the editor.
Is CSS the best approach here?
If anyone has done this successfully advice is appreciated.
on my contact page "http://findgirvin.com.s3-website.us-east-2.amazonaws.com/Contact"
the phone icon doesn't center when brought down to mobile screen size. I rewrote the code multiple times. Its a MDL List. Any thoughts?
After seeing the site.
I don't know how to solve it 'the mdl UI way' since I haven't used it.
But you can add your own CSS to the span of the mdl-list__item-primary-content class, like:
.mdl-list__item .mdl-list__item-primary-content > span {
display: flex;
flex-direction: column;
align-items: center;
}
If I use flexbox method to center horizontally of a column flex.
Don't forget to add media queries for small screen only.
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
I am currently working on this repo with my friend: https://github.com/openteach/openteach.
I have this bug that I can not fix. I have tried everything, but nothing seems to work?!
I have attached a picture of the bug.
Any help/ideas is appreciated.
Thanks.
Picture of bug:
Bug
You can do as Mike King suggest, just remember to set the background size to cover aswell:
background-size: cover;
This will make sure the background will always cover all of it's element, no matter what size the image is.
Another thing could be the element is not taking all of the height of the viewport. This can be fixed by setting the height relative to the viewport like:
body {
height: 100vh;
background-image: url(assets/images/stardust.png);
background-size: cover;
}
Set the background on the body, and you won't have a gap any more
body{
background: url(assets/images/stardust.png);
}
The sum of the heights doesn't fill the whole page, and you only have the background on the <div class="App_component">
The other way is to set that class on the body tag:
<body class="App_component">
I have a responsive website using bootstrap and a bootstrap theme. The responsive features work well except on this page http://mtganalytics.net/cards on smartphones in portrait mode.
The page has too many columns so you can't see everything. However, the page doesn't scroll. How can I enable scrolling?
At line 378 of http://mtganalytics.net/base-admin/css/base-admin.css you have
.widget {
position: relative;
clear: both;
width: auto;
margin-bottom: 2em;
overflow: hidden;
}
If you either remove the overflow:hidden, or overwrite it for mobile viewports I think it will help.
Good luck