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.
Related
I'm currently face an issue with my fixed 100% width header overlapping the scroll bar. I need the overflow-x:hidden as I have CSS animations which fly in and cause horizontal scrollbars.
Here is the JS Fiddle Code: https://js fiddle.net/kanwu3mc/1/
Any help greatly appreciated.
A quick solution would be to add the following to your scroll event callback:
header.style.width = `${document.body.scrollWidth}px`;
However, I would suggest that you consider implementing a largely CSS solution for such tasks. Consider making the header position: sticky and adding a new teal color class to the element when the scroll event is triggered.
This is a problem
html, body{
...
height:100%;
...
}
change to
html, body{
...
min-height:100%;
...
}
It's incorrect to fix the height of html and body that way. Only min-height allowed in this case.
Issue: https://www.mirabella.com/find-your-style/mirabellaclothing/mirabellagear/mirabella-white-sweatshirt.html
this is what happens when we upload a product with with attributes. It seems to be a position issue. But i have tried everything I can think of to correct the issue. If I remove the position attribute it looks fine except some of the text is incorrectly positioned. Actually everything i have tried has not corrected the text position. thanks
Remove the "float:left;" attribute from the style:
.product-view .product-img-box {
/* float: left; */
width: 400px;
}
I would also force the "a.selectBox" (which represents the select control) to be of 100% width to make it fully responsive.
So I am making a menu with a dropdown and there is something very weird happening with foundation. The link is coming with a padding-right of 21rem !important and I am pretty sure it is coming from foundation. I don't have 21rem or any importants in my menu css. Here's the exact line of code that it is generating. I have a file that compiles all the css so it is hard to pinpoint exactly the cause.
.top-bar-section .has-dropdown > a {
padding-right: 21rem !important; }
Any ideas?
target .profile-menu in your css and override it with padding-right: 0 !important if that doesn't work add an id to that a tag and target that id
I think, there is a problem with implicit units.
Edit your bower_components/foundation/scss/foundation/components/_top-bar.scss file from
padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
to
padding-#{$opposite-direction}: $topbar-link-padding + rem-calc(20) !important;
In Foundation commit 94312727c2dc18016bef51527e9913975612822b this is in line 517.
This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!
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.