I am learning some React from a course Maximilian Schwarzmuller created. It seems like some of the styles are not working. Tried to figure out why but I still don't have an idea.
Here is the code https://codesandbox.io/s/elastic-montalcini-3urgmm
Basically Max uses position fixed to stick the header to the top of the website, then he uses flexbox to align items and justify content - space-between to have the button on the right side of the site. He also sets up a padding to move button and h1 header closer to the centre.
If I remove padding it looks ok but then I need to find a way to make those items closer to centre. This becomes an issue.
I know that I can use some workaround but I would like to make it work as Max did. (Maybe he cheated :D )
Related
I always think I understand CSS positioning, but then get frustrated again. Ok when I have position:static, i.e., default, my page looks like this (shown with inspect element highlighting the parent row of the col-xs-* that contains the date picker content):
I would like to keep everything about that page the exact same EXCEPT that I want to fix the col-xs-* that contains the date picker content, so that when the page scrolls down (not in the Fiddle example), it would float on top. Nevermind the z-index, I just noticed, that the minute I apply position:fixed, something interesting happens. Here's a screenshot again where I inspect element and tried to highlight parent row of the col-xs-* that is fixed. Notice 2 things: 1) The parent row isn't highlighted in blue on the page; no idea where it went, 2) The content has shifted right for some reason. It's no longer centered above "Comparison's sake" text.
Can someone please explain this behavior to me? I think it's persistently messing up my code. My end goal is again to keep everything centered as in the first snapshot, but just fix the col-xs-*.
Code in this Fiddle: https://jsfiddle.net/2v3gpa7x/
The relevant col-xs-* has id date-row
For any type of scrolling to work you need to use {position:absolute;top:0;left:0;margin:0 auto;} The term 'auto' keeps the page content centered horizontally. "absolute" allows it all to move as a group. If I understood more of what you wanted I could add ul 'wrappers' to force the position of any object
I think that this is a really simple question but I can´t get a solution by myself.
I have a fixed navigation bar in Bootstrap 3 and when I click in one of the nav items it scrolls down to the section with the proper ID. However, it goes all the way until the very beginning of the text. I would like to give it a little bit of space (padding) on top of the text, so i tis easier to read.
This is an example of what I am saying.
However, I would like it to scroll down until the start of the section, including the padding space I have. Like this:
So basically if I could set the menu to navigate to around 20 or 30px on top of the section that would be perfect, because I don´t want to add more padding or margins since that would put too much white space in the site when you are manually scrolling.
I think the section with the proper ID has margin-top: x, change it on padding-top: x. It should work.
I use a jQuery plugin to handle this offsetting of position. Check out Animated Scroll on github.
I don't have all the code to hand, but I use this to kick it off:
$('.btn--scroll-down').click(function () {
$(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
});
If you read the docs, you'll notice an option for padding - that's your offset.
If I've had to use a negative margin and then offset with padding to position elements on web page, how do I make any areas that appear under this space still clickable (like the screenshot below shows)?
I have tried using z-index to make the 'join our loyalty scheme' banner stack below everything else but that doesn't seem to be working...
I tried replicating the issue in this jsfiddle but as per the below screenshot, the links underneath this space are clickable still so something is different between the website and the jsfiddle example obviously but can anyone point me to the quickest solution to rectify this if z-index isn't the answer?
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
Firstly, I'd like to say that I don't want to do this with Javascript.
http://jsfiddle.net/WqrBY/2/
In this jsFiddle, I've got two columns but the bottom right div is obviously aligned with the bottom left. I'd like to be able to (without adjusting the markup) move the bottom right div just under the top right (just like how the bottom left is under the top left).
I don't want to change the markup because the order of the divs is important when it switches to a one-column layout for smaller screen sizes.
Can anyone help me out here?
I'm going to preface this with saying I'm not sure why this works... I'm going to keep fiddling to test it. Comments welcome.
Here's my fiddle
Edit:
I know that you specifically mentioned that you don't want to 'change' the markup because of the div ordering. Would you be open to adding to the markup? This shouldn't change the order of information, but it might be a simple fix to what you're trying to do: http://jsfiddle.net/tracyfu/WqrBY/7/