enter image description here
I have one problem that I can't set the margin-bottom in the class.
To sum up, I have one tsx file and it imports css file. And in the css file, I mentioned
.Form-formTitle-0-2-22 {
margin-bottom: 0.5rem;
}
But it doesn't be applied. Does anyone happen to know how to fix this? and I am curious what's as well.
Thank you.
Related
I'm building a website using the following template as a base: https://github.com/issaafalkattan/React-Landing-Page-Template
I'm running into a problem when removing the margin in several of the sections. For example (as seen using Chrome's developer-tools), I'd like to remove the 'orange' areas of the Gallery section:
During my troubleshooting, I added
* {
margin:0 !important;
padding:0 !important;
}
to both style.css and bootstrap.css to 'force' the margins to go away so I could find the true culprit later, but that only shifted the left margin to the right:
Because of this, I'm assuming React is overriding my CSS; is there a way I can 'ignore' React setting the margins for certain components? I'm new to React so apologies if this is a silly question, but I can't seem to find a fix for my specific problem.
Thank you!
Adding width: 100vw; to the container, as Nick Vu suggested, fixed my issue.
I've been at this problem fro quite some time and can't seem to find a solution. Any help would be greatly appreciated. I have created _variables.css file which hold all my CSS variables. I use one of the variables in _global.css on the body tag. However, the styling isn't applied. I have attached screenshots. Thank you. _variables.css. _global.css. styles.css error message
You are using css preprocessors variables so you have to change file extensions to be .scss, also you need to compile your .scss files to .css , check this guide
or you can use css variables with different syntax , just like that
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
is there anyway to make all image in html page to be responsive without need to type class="img-responsive" and width="100%" ? because i'm using tinymce html editor and when i put image into there, the image is not responsive and it's looks broken when i browse my site using smartphone, so maybe there is some way to make all to be responsive by default?
or maybe there is some javascript to do that? detect all img tag in page and add
class="img responsive" width="100%"
okay sorry that i miss something, this question is already been asked in here
so i just put a link to the answer
Images not responsive by default in Twitter Bootstrap 3?
so just add
img {
display: inline-block;
height: auto;
max-width: 100%;
}
just add this css line in the very bottom of your bootstrap.css or just make a new css file and named it mystyle and put it after every css link in your head (i do it like that so keep the original bootstrap.css file clean)
You can override another css attribute by using !important; as addition to your css attribute. So, without knowing the depth of bootstrap, you can try to add something like this to your stylesheet
img {
width: 100% !important;
height: auto !important;
}
Or insert this between <style> and </style> in your head-section.
Hope this helps as a quick tipp. If you need other suggestions please let me know.
UPDATE
The other provided answere is the clean one. You should mark that answere as correct ;)
Best regards,
Marian.
No need to handle this via css. You can apply "img-responsive" class at the time of adding the image in tinymce editor itself.
Add below property in your tintmce editor properties:
image_class_list: [
{title: 'Responsive', value: 'img-responsive'},
{title: 'None', value: ''}
],
Reference and credits:
http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620
I have the element.style 'margin-left: 0;' on one of my ul classes. I would like to get rid of it but I can't change the js file without messing everything up so I'm wondering if there is a way to disable this in my CSS? Thanks in advance.
In your CSS just do
ul.something {
margin-left: auto !important; // or whatever px instead of auto
}
That will work most of the time, provided it's the last stylesheet to be loaded, otherwise it might be overridden by a different style again.
I ma helping someone out to make a web site but I cant find solution how to add HTML & CSS instead of images in the javascript "ContentFlow" it has been downloaded here: http://www.jacksasylum.eu/ContentFlow/
here you can see how it looks with html text:
http://portfoliodummy.medienbayer.de/ContentFlow_mb_test/
as you can see when you move the blocs the text goes up and down! I have tried to add padding to it. not to assign font-size... but it wont work. I need to know if anyone has any idea or maybe solution. I know that images are the best way to go but he wants it to be with HTML.
Thank you for your Help
.ContentFlow * {
margin: 5%; /*adjust the value as you prefer */
}
.ContentFlow .flow .item div.content {
overflow: hidden;
}
tested only on chrome/linux. :-)
This improves the situation. Not sure if further improvement is possible.
You could use
.ContentFlow .flow .item div.content {
overflow:hidden;
white-space:nowrap;
}
Then do hard breaks <br /> on the content to ensure each item fits in the box. There'll be some clipping on resize but you won't have a bounce. You could probably automate where to put the breaks with a little javascript magic too.