I have created a Wordpress theme with "responsive" sidebar's. I have set them to 20% width - which works great. However, I have a Facebook Widget inside my left sidebar which is not "resizing" according to screen width / size.
I have tried the below in my css, with no avail:
.fb_iframe_widget iframe {
position: relative;
max-width: 100%;
min-width: 100%;
}
The facebook widget is still "overlapping" on smaller / narrower screen sizes.
To stop the iframe from overflowing into the middle body content, you could apply an overflow: hidden to the parent div
.art-blockcontent {
overflow: hidden;
padding: 7px;
margin: 0 auto;
color: #000000;
font-size: 12px;
font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
The iframe isn't going to magically squash itself to fit the tiny space on offer ( like the stretched image in the right column) and is probably at minimum viable height / width to actually serve any purpose.
I note that your nav menu is also broken at smaller screen sizes, maybe you would be better off to change the overall breakpoint and have your site go to a one column layout sooner.
You have a wrong width in span around the iframe, try this:
<span style="vertical-align: bottom;width: 100%;height: 230px;">
and
.fb_iframe_widget iframe {
position: relative;
max-width: 100%;
}
Is this happening when you 'resize' the browser window live or when you are looking at the page at different devices?
Depending on which widget you are using, the official facebook widget I believe has a responsive setting you can select when building it. I have noticed that the widget itself is only responsive when you reload the page at a different screen size. Resizing your browser window on the fly will not affect the dimensions of the widget. It's using javascript to render the widget correctly but only on the page load.
Related
I am creating an application that has a menu on the left hand side of the screen. The menu has the following CSS applied to it:
.menu .levelHolderClass {
position: absolute;
overflow: hidden;
top: 0;
background: #336ca6;
width: auto;
min-height: 100%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
zoom: 1;
}
This works until the screen dynamically resizes to show more contents as the screen is a table-like structure loading content as the user scrolls down.
Is there any particular CSS tag which I can use to indicate that the element should resize after the page size has increased? Currently when the screen adds more rows the menu stops after 100% screen height.
If there is no CSS tag to do this, how would you approach it in Javascript?
Edit: The images below shows the menu (blue bar) before and after scrolling down past 1 page height.
To temporarily appease the issue, I've added :
position: fixed;
to the css. This makes the menu at least scroll with the user regardless of the page resizing.
I'm trying to get a simple page layout where the navbar sits vertically along the right side of the user's window, taking up no more than 20% of the available space. The remaining 80% of space to the left is used for content.
I want the entire page to be resizable, so no matter how big or small the browser window is (within reason), the content will resize to the user's screen. Everything works and resizes great, but there's one problem with the navBar. Here's a CSS excerpt:
body{
background-color: #111111;
font-family: Roboto;
color: #cccccc;
font-weight: 300;
font-size: 14pt;
height: 100%;
}
#content{
width: 80%;
float: left;
}
#navBar{
width: 20%;
height: 100%;
background-color: #00C9FF;
float: left;
position: absolute;
}
#welcome{
background-color: #222222;
text-align: center;
margin: 1%;
}
The Problem:
If I leave the code above as is, the navBar renders on the right side of the screen, as it should, but it is not 100% the height of the browser window. Note it still resizes when the browser window's WIDTH is changed.
If I set navBar's position to absolute (position: absolute) the navbar renders exactly how it should render, except it floats to the left side of the browser, basically making it on the complete opposite side of where it should be.
Demo: http://codepen.io/anon/pen/YPyvzO (remove position: absolute to see where the navBar SHOULD render)
I have tried several different things including setting "HTML" in CSS to height: 100% and several different position properties for navbar, all to no avail. I'd like for this to be done only in CSS, but I'm not sure if it's possible.
Add the following:
position: absolute;
right: 0;
to #navBar. One thing that took me a long time to understand is that position: absolute overrides everything, even floats.
when you resize the browser the width and height change, so for this purpose you have to use media query in CSS and in this you have to tell the browser that in this width the navbar should be in given width. and another option is that you can use bootstrap, in bootstrap you not write too much css. and all the work become easy.
The design of my site (using Bootstrap) is when the user has scrolled to the bottom, the fixed header touches the link in the footer. On small screens it works fine. Like so -
But on a larger screen resolution (1024x768 upwards), the header stops before it reaches the footer. Like so -
I know that the html and body have to have a defined height so added this -
html, body {
height:100%;
}
but didn't work.
I also tried giving the footer a height -
#bottom{
border-top: none;
font-family: Calibri, san-serif;
letter-spacing:2px;
text-transform:uppercase;
color:#000!important;
font-size: 20px;
}
.botwid{
min-height: 500px;
padding-top: 35px;
width: 100%;
margin: 0 555px;
but that didn't work either.
Here is my site.
Thanks
Seems like margin-bottom of the footer needs to be a (screenHeight - titleHeight). Try setting this property using javascript (as it would change whenever the window size changes).
Using JQuery, this could be done using
.resize() call.
The following is a pretty simple liquid code template, where I keep this layout from getting too wide on a large monitor and a min-width may be desirable to keep this layout from getting too narrow. The container surrounds all other divs giving them their percentage-based width.
body {
font: Arial, Helvetica, sans-serif;
background: #CCC;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 90%;
max-width: 1260px;
min-width: 780px;
background: #FFF;
margin: 0 auto;
}
When browsing on pages with only low content, the body doesn’t shrink, move or shake (because the scrollbar doesn’t appear). When browsing between the different kind of pages (low content-no scrollbar and high content-scrollbar appears) the body moves a little bit and causes the whole web site browsing, a shaking look.
How to avoid the above page movements?
I don’t want to achieve a solution by setting overflow:scroll; since I don’t want always displaying the scrollbars.
Any help would be much appreciated,
thanks, Mike
Have you tried overflow: auto;? It will take both the X and Y scroll bars into account separately and only show the scroll bar if necessary.
If, as #pinkgothic suggested in the comments below, you want to always show the vertical scroll bar, try overflow-y: scroll;.
To always hide the horizontal scrollbar, use overflow-x: hidden;
If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content overflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you,
Aaron
Add...
min-width: 1260px;
at the
#news-container
css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.