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
Related
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
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!
I have a site with two sidebars and the content in the middle. In the HTML it's positioned as:
sidebar 1 - floated left
middle content - floated left
sidebar 2 - floated right
And that's also how it looks on the site. All good. The problem is i'm trying to make the site responsive, and i want the content to be at the top and the sidebars to jump down below, and i'm not entirely sure how to do that. I could use javascript, but i would much prefer CSS to do it, if possible.
Here's the site i'm working on if it helps:
[URL no longer allowed]
Squeeze the window down a bit and watch the left sidebar appear above the content - not good.
Is it possible?
Reorder your divs so the body content div is first.
Then wrap the first sidebar and body content in a div floating the body content to the right. Use a media query so that once your down to mobile size you set the floats to none
<div float:left>
<main-content float:right>
<sidebar float:left>
<\div>
<sidebar float:right>
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?