Is there a way to make a sidebar collapse to the bottom of the page without any JavaScript when the browser reaches a certain size.
I'm creating a responsive theme that can be seen at http://flexibletheme.tumblr.com/. By resizing your browser window to below 600px, the theme goes into a linear version (just resize your browser smaller until it changes to this).
At the top the sidebar changes into a full menu, and this is the part which I want to go to the bottom instead of staying at the top.
The relevant parts of the CSS code are #media screen and (max-width: 600px) [this tells the browser to use the specified CSS when the browser is less than 600px], the sidebar using the HTML 5 element called , and each post is wrapped in .
Have you tried moving the entire aside block underneath the container? I'm still learning responsive web design myself, but my understanding is that if you structure your html for the smallest size you want to accommodate, you will have a cleaner layout with less hacks.
Place your sidebar inside your #container div and float your section left and your sidebar right.
Related
So I built this Wordpress page using WPBakery page builder and added a Pardot form to it. On certain browser sizes the form - which looks like it is an iframe element - is larger than the container it's in, so it adds scrollbars to compensate. Is there a recommended solution to keep this from happening? See attached image:
Picture of Pardot form forcing scrollbars
If you're not entirely sure if the form is an iframe element, you could try targeting the form's fields using CSS and using dynamic width and height values such as width: 100%; instead of something like width: 250px;, which will automatically resize your elements to fit the available width. This will take care of the horizontal scrollbar.
For the vertical scrollbar, you could try targeting the scrollbar with psuedo properties to manipulate it's style or hide it altogether. You can read more about it here:
https://css-tricks.com/almanac/properties/s/scrollbar/
It's worth noting though, that this approach isn't highly recommended, due to it's limited support across different browsers and platforms.
However, in the case of this specific vertical scrollbar, it appears to be a height or padding issue on the form's container, so you could target that with #media queries to make it more responsive across devices.
I hope this helps!
The best you can do, is in Pardot, create custom CSS - in Pardot - to accommodate smaller screen sizes.
The biggest issue with this is that the screen size is iframe dependent and not actual browser window width that it's embedded in.
So if you put the iframe into a container that is 600px wide on desktop, that would be a media query of #media (min-width: 600px) in Pardot. You need to adjust the media query for the container size.
If you don't have access to Pardot's CSS tools, you're mostly out of luck.
I 've created a site using Dreamweaver, and all my images have absolute position with % metrics. it expands proportionally on wider screens, but everytime I try to resize and shrink browser window it just becomes a mess with all the images fallen in one narrow window. How can I rebuild my design so it shrinks in a browser window in a way that when it is too small for an element, it just wouldn't fit. Do I have to use fixed pos-ing or any other type of pos-ing? Whats the usual way web designers do the sites?
P.S. my site contains text and abs. images, as well as fixed image that scrolls with the screen. What should I use to keep it that way but make a decent view in all screen sizes?
Use media queries or place a min-width on either the body or the element in question. For example placing min-width:900px on the body will stop the entire body from re-sizing below 900px width. (Note: That is not the responsive way to do things. Media queries are a much better practice)
I really can't explain why this is happening but I am building a WP theme in BS3, for some reason, on the tablet viewport (768 to 991px) my links stop working. They are not clickable, tappable, tab-able, etc.
What causes this strange phenomena? How do I even diagnose when my site is W3C Compliant?
Ugh... the horror!
I really don't have code to support this, but I could paste my entire page on here. I will do that on request, or my CSS file, etc.
When using bootstrap .col-* DIVs should reside in .row DIVs and in turn .container DIVs. I can see in your html that you have 2 top level DIVs with a class of .col-*, and they have different screen sizes associated with them. Your footer DIV has a class of 'col-lg-12 footer area' which means when it gets below 991px it will stop floating, while the rest of your content floats, which is whats causing the issue.
If you change the footer class to: 'col-sm-12 footer area' - this will solve the issue.
But what you ideally need to do is remove the col-sm-12 from your footer and page-wrap altogether and replace it with 'container' so they look like: <div class="container footer area">
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design