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.
Related
Here's what I'm trying to do. I want to have the navbar-brand image overlapping the navbar without altering it's height (navbar has fixed height of 80px).
It kinda works, however I cannot get the image to fully expose, it's being cut at the top. I tried vertical-align: top but it just slightly changes the position, the image is still being cut off. I want it to start exactly at the top of the screen, without any padding.
On devices with screens smaller than md the overlapping image is being hidden and another one is show, which should now be img-fluid and adjust it's size to the size of the navbar. However when resizing the screen so the navbar collapses, the navbar size remains 80px but the image starts overlapping it and the collapse-toggler button gets also messed up.
How can I get both of these things to work?
Here's a codepen: https://codepen.io/anon/pen/QYmMyg
Edit: Also, I noticed that setting the navbar to a fixed height actually prevents the collapse from working, because the height is limited. Is there any way I could increase the navbar height and keep the overlapping image and also keep the collapse working?
.navbar-brand {
transform: translateY(calc(50% - 40px));
padding-top: 0;
}
... will fix your problem (where 40px is half the height of .navbar).
Working example: https://codepen.io/andrei-gheorghiu/pen/pGLrOZ
The problem is rooted in .navbar>.container { align-items: center;}, which you don't want to mess with.
Ref: "Edit", it's a different question altogether. Answering it here would be detrimental to anyone having a similar problem, as it decreases the chances of them finding the answer.
Avoid asking multiple questions at once. Your questions need to remain helpful for anyone with a similar problem, so you need to ask them separately.
I'm finishing this website page, http://www.goldhairmoveis.com.br/bancos
But somehow the product alignment is broken.
All the configuration is the same for all divs and only this is broken.
The problem is that one of the images (cadeiraopop.jpg) is 1px bigger than the rest.
The reason this is a problem, is the bootstrap alignment is done using css floats. So what is happening is the element starts and the oneside of the page and floats in the direction that you have specified (in this case, starts right, floats left). It continues to float until it hits something and then it stops. There for, you will need to ensure all images are the same height (preferably the same width as well.)
You can do this by manually editing the image size, or just use a css height attribute.
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
I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.
http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?
Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.
Ok...
Your Gallery is in a div that has been given a specified position.
e.g
#gallery {
position: relative;
left: 950px; /* This needs to be removed */
top: -560px; /* This needs to be removed */
}
That will always force the div off to the side.
What I think you want and correct me if I'm wrong is two columns.
That's actually quite easy to do and I've set up an example here to get you going.
In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.
If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.
Hopefully this helps.
Edit
I'll try my best to explain everything properly.
The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.
The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.
Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.
Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.