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.
Related
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.
I've got a bootstrap container which has styling of
.container {
margin-top: 12em;
font-family: 'Amatic SC', cursive;
border-bottom: 1px solid;
border-color: #800000;
}
The reason for this is that I want my nav bar on a desktop to be floating in the middle of the screen 12em from the top. It appears to be block display due to bootstrap auto styling.
When I switch to a mobile I've got a burger menu displaying, however I want this to be at the top right of the screen, its currently getting pushed down by the container, even when I float it. CSS below:
.navbar-toggle,
.collapsed {
position: absolute;
top: 1em;
right: 1em;
}
Please help!
Check out this Liveweave - http://liveweave.com/HCbDKV
So basically I add queries so the container will remove the margin top when the screen size is less than 768px (mobile).
I suggest you to add a class or id for the container because adding a margin value to the container will technically add margin to all containers you are about to make in your project. Let me know.
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.
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
I am trying to make the page linked responsive, specifically the menu bar. I've added the following CSS hoping to make the menu responsive but as soon as I drag the page down past about 1140 px width a gap appears between the menu bar and the slider above it. This gets progressively wider the narrower the page gets. Is there anyway to fix this ?
The font property is not having any effect, I've looked in the CSS file but cannot find the ID or class that controls font size in the menu ?
Page link: http://dbtest.destinationballybunion.ie/?page_id=2160
Here's the CSS I've added:
#access {
background: url('http://dbtest.destinationballybunion.ie/wp-content/uploads/2014/05
/new-menu-back1.jpg');
background-repeat:no-repeat;
background-size: 100% 100%;
background-size: contain;
}
#access {
position: absolute;
top: 4.35%;
left: 0%;
right: 0%;
z-index: 100;
}
#access a {
padding-top: 15px;
padding-bottom: 11px;
}
#access a {
font-size: 4.5vw;
}
The class .culture appears to have a margin top on it of 30px. If you remove that, it should fix it.
Looking at the css stylesheet it seems like the id (#access a) is being overruled by this line of css:
NAV DIV UL LI.page_item.page-item-1145 A.
You could add !important to #acess a or you could alter the class NAV DIV UL LI.page_item.page-item-1145 A to control the font size within the menu bar.