So I'm trying to style links on a navigation bar using CSS. When I set the space property between links using a set pixel value, it works perfectly.
padding: 0 3rem;
However, when I replace this line to use the following code for scalability
padding-left: 15%;
It causes a glitch on my screen where it is close together and then expands as I click them. Initial
After various interactions, the links padding slowly expand to the proper size. After some interaction Then when I press a link, (which hasn't been set to anything yet, so it goes back to the home page), the padding goes back to 0. The code works perfectly across devices within console however, just not on the browser as I test it. Does this have to do with React improperly calculating padding percentages?
Not sure why it is doing that. Have you tried using Flexbox?
If you set the parent element to display: flex you can use justify-content: space-around to spread the links out within the parent container.
Then you can add media queries and control the total size of the parent container instead of trying to calculate the spaces in em or rem. Flexbox will automatically space the links evenly.
Here is an example.
Related
I have a site that I am trying to make more mobile-friendly (http://realnewsline.com/). The problem I am having is that the three main images at the top of the website get cut off on mobile devices and 1 or two of them become impossible to view. Is there any way I can fix this either in Wordpress or with some CSS? Thanks!
Firstly, your .image-wrap divs have an inline style attribute setting the width to 300px. If you remove that, the images will scale to fit on the device.
To avoid the columns disappearing off the screen when it becomes small, you can make them wrap to become rows. Currently, the .featured-wrap elements have a width set to 33% (via body #wrapper #featured .featured-wrap) and 100% (in .featured-wrap). I would suggest using the display: flex; flex-wrap: wrap; property on their parent element (#featured), giving the .featured-wrap elements an absolute with (say 300px, make sure to remove those other width properties).
Here is some more info on the flex display mode: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I find it very useful.
I'm in the process of turning my currently fixed width site into a responsive site which can be viewed at: http://www.byfrequency.co.uk/demo
I've created the CSS framework and applied the relevant media queries (with the help of Gridpak) so no problems there. The problem I'm getting is when I resize the browser my divs change position and end up creating a flickering effect. This only seems to occur between my set widths of 768px and 1080px.
I've no idea why this is happening and how to solve the problem so not able to copy and paste the relevant bits of code. Would really appreciate some help and guidance!
The flickering is coming from the few elements that jump from the left side to the right side at certain widths. Because of the way browsers round things, the two halves of the row above the jumping elements do not have the same height. When the right side of the above row becomes shorter by 1 pixel, the jumping element moves up into that space. Its float: left; property fits it on the right side of the big ‘taller by 1 pixel’ block on the left.
To prevent the jumping, try adding clear: left; to the jumping elements at the problematic widths. (In my test, adding this to the .five element at line 761 prevented it from jumping. I tried it there in your “Medium” media query because your layout only needs it at min-width: 768px and wider.)
Ultimately, thanks to browser rounding, you will still see 1px height mismatches between these row halves, but big issue will be prevented by clearing the floats in the problem areas.
Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.
I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it's elements when the window is resized.
An example page can be found here: (removed link for client)
The content is contained within a wrapper currently set to relative position:
#page_wrapper
{
position: relative;
}
I tried to change it to this:
#page_wrapper
{
min-width: 960px;
}
This doesn't seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?
Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/
It won't be a totally simple process to do what you want but a starting point would be going to this page:
http://twitter.github.com/bootstrap/customize.html
There you could uncheck the "Responsive" checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.
Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).
There are a few things going on here:
The navigation has float: right on it somewhere. This means that when its width, plus the width of anything it sits next to is wider than its container, it's going to shift so that it can fit.
Your min-width is too narrow If your min-width is 960px, but the width of your navigation, plus the width of your logo (the two elements that sit side by side), plus any margins, paddings, and borders, add up to anything more than 960px, then it's not going to sit in line. You need to either adjust your min-width, or adjust the calculated width of the elements to fit within that 960px minimum. This can be done either by making margins/paddings smaller, decreasing the text size, setting explicit widths, or any combination thereof.
your elements are probably moving around because you have them in the same tag so if you want your elements to hold their positions you need to use a different for each element and align them to your preference perhaps on css or inside the tag(that's up to you). Otherwise in a div tag if you follow the same procedure for each element you shouldn't have any problems. That goes for sentences too... you need to make each word in a sentence be in between individual
What I must change to make the navigation bar fixed when screen size under 940px? I don't want to make it responsive. If you resize your browser windows under 940px you will see that scroolbar-x (bottom-scrollbar) appear, but when you scroll it to the right, the navigation bar position still fixed, and some menu won't appear.
Maybe some picture will explain what my problem.
This can't be done in CSS alone.
The example you give (Twitter) has the navbar with fixed position AND fixed size at all screen sizes. Fixed position means that the scrollbars will not affect the position of the navbar, and this is why you can't use the x-scrollbar to see the part of the navbar which, once it's less than 940px wide, is hidden 'under' the right border of the browser window.
So you have to choose, either
Have a fixed position, fixed size navbar which is present at the top no matter how far the user scrolls down and accept that under a small enough screen they won't be able to scroll horizontally to see it all, OR
Have a fixed position, fluid size navbar which adjusts its width to accommodate different screen sizes, which will hopefully mitigate the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit in one row, OR
Have a non-fixed position, fixed size navbar which will respond to horizontal scrolling but will not be ever-present when the user scrolls down the page.
Effectively, you can't have position work one way in the x direction and another in y.
You can see what I mean by option 2 by editing the following classes in the Twitter page using the CSS inspector:
.global-nav .container {
width: auto;
max-width: 865px;
}
.global-nav, .global-nav-outer {
height: auto;
}
The second selector implements the vertical fluidity for once the contents can't fit in one row.
You can see what I mean by option 3 by making these changes:
.topbar {
position: absolute;
/* ... the rest as is */
}
EDIT
Of course, that it can't be done in CSS doesn't mean it can't be done at all. Here's a jsfiddle implementing that script you mentioned. This uses MooTools as opposed to jQuery, which I normally use with bootstrap.
The fiddle: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/
(Thanks to #Sherbrow for providing the base fiddle with which I made this one).
Ran into this same problem and was thrilled with the suggested solution, but then I struggled to implement in my own code (Yes, noobie).
It turns out that there's a conflict here with jquery.js, which I need elsewhere in my code.
http://jsfiddle.net/uadDW/83/
/* code as before .. only added jquery.js link */
Remove jquery.js from the External Resources in the above fiddle and you get the original desired behavior. Rats!
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.