i have a responsive layout that im working on but having troubles, whenever i try and shrink the browser to reflect mobile view the elements in my container are responsive but they get cut off.... this is due to a overflow hidden property on my container. Now everytime i set it off my elements in the main container appear but they just present them selves over my footer.
is there anyway i can get the footer to be responsive to those elements in the container and move down with the content?
https://trial.nationalpaymentcard.com/FuelMaster/enroll.html this is the link of what im trying to work on.
please inspect element and help me figure out this puzzle.
Thanks again!
Related
I have flexbox layout with collapsible sidebar. I used 'fit' mode of jQuery colResizable plugin (JColResizer) created by Alvaro Prieto Lauroba v1.6. The problem is the plugin table not shrinking or can't calculate its width. The table widens but does not shrink.
It works perfectly in the plugin demo page but in my demo page it's not shrinking.
Plugins demo page
My jsFiddle
What am I doing wrong?
When I remove flex declarations and fixed position from div.dms-container it starts to work as its designed for: Widens and shrinks. All good. But I have to keep dms-container fixed to able to scroll longer table rows while keeping all other content still.
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
What is wrong with the CSS (at least I think it is CSS related) that one particular div with a slider is not responsive anymore? The rest of the site is still responsive.
http://websiteprofessioneel.nl/
It is the big square image slider in the content right (so not the image in the left sidebar or the header image). The maindiv container that contains the rest of the slider is : <div class="scheeps_slider">
You can see the image is not scaling down anymore if you make the screensize smaller than the image width.
Is there CSS in one of the underlying divs of the slider or li's that break responsiveness?
Extra info:
( Note: It did work responsive fine when the slide was not clickable, but to get it clickable with custom fields html was slightly altered to get a setup with an ul and li approach, but I don't get how that should interfere with responsiviness)
The slider-jquery used here is from opensource 2cycle which acts as a perfectly responsive slider used in other pages so something in the specific css used here is messing it up I think
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.
quick question. I have a tabbed interface for my site but I have all the parts of the site crashing into each other. How do I achieve a fluid layout where it simply resizes when the display is smaller. I read a few articles # alistapart and made my containing div relative to the browser window and every other div within the d container relative and still nothing. any clues on what else I should be trying?
alt text http://www.thelawyerschronicle.com/images/siteprob.jpg
The two biggest problems I see are the banner ad on top of everything else, and the tabs running over to the next line.
The tabs seem to do that simply because you have too many. You'll either need to make them smaller/decrease padding, etc. or put fewer items in the menu.
It looks like the banner isn't positioned correctly. Margin/padding?