Adjusting navigation bar to fit screen width - html

I'd like to increase the width of the border below my top social buttons, navigation menu and footer social widgets to fit the width of the screen but can't seem to figure out how to.
My page - www.adelinesays.blogspot.com

You have #top-social nested as a child of .outerwrapper.
If you remove the property width: 1100px; from .outerwrapper it will extend the #top-social component the full width.
Basically .outerwrapper is making #top-social have a maximum block width of 1100px.
If you open up Chrome developer tools (command + option + "i") on Mac, you will be able to select the .outerwrapper and uncheck width: 1100px; and you will see the desired output that you are looking for.
I think this is the simplest solution and I see it working as desired just with this one change.
If you find problems elsewhere by removing this max-width, you can create another container on the same top level as .outerwrapper and just put your top navigation items inside of it. The fact that you are nesting a "full-width" top navigation inside of a constrained width parent component (a component higher up in the vertical rythm to the nested #top-social component) means that the #top-social component is inheriting this max-width from its parent .outerwrapper.
Hope this helps!
#javascriptjames
http://jamescoury.com

The way your website is built, you could delete outerwrapper altogether and apply container class to those elements that you wish to maintain width of 1100px.
Deleting outerwrapper div, container div surrounding navigation and adding container class to widget-content div would achieve the layout you wish in this case.

Related

CSS Adaptive Styling - Add scrolling to a sidebar without a defined height

I'm creating a basic web app which contains a sidebar that is sized vertically by how many elements are in it.
I want the web-app to have adaptive sizing, so will work on any size device.
When the user shrinks the viewport vertically and some of the elements within the sidebar overflow the viewport, I want the sidebar to shrink not overflowing the viewport, and allow scrolling of its contents.
The sidebar is not a predefined height (eg. 50% or 700px), as it is determined by how many elements are within it (could be 3, could be 30).
The image below is the best way I can visualise what I am looking to do:
CSS example
White: is the viewport
Light Blue: is the sidebar
Dark Blue: is the elements inside sidebar
Grey: is the scrollbar
I can get this to work when the sidebar is a predefined height by using overflow: auto, but cannot get this to work when I do not define the height of the sidebar, and leave it to the child elements to determine its height.
Any help at all would be greatly appreciated!
If i can understand true, you can use calc() function in your css.
eg:
If you show 5 element on viewport(height), you can use this code for element style:
height: calc(100vh/5)
this code means: Divide the entire apparent height by 5.
eg: https://jsfiddle.net/uniak/rgzf9nmy/

Wordpress How to make Slider Full-Width (Metaslider)

When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness

How to make sub-menu span full screen if parent element is NOT full screen width?

At the top of this site, when you hover over Solutions, Brands, etc, a blue dropdown back comes up. I'd like that to go full width of the page, but even if I set the width of that element (div.mega-dropdown-inner) to 100%, it only fills up 100% of it's parent element, not the full page.
Is there a relatively easy way to accomplish this, or is my only option to make the parent element(s) 100% width first?
I guess what I'm asking is...Is there a way to tell the CSS that I want the "width" parameter to base itself on screen width, not parent element width? Like an override of sorts.
I'm assuming no, but figured I'd ask some smarter people to make sure.
Simple line of css should do the trick:
.mega-dropdown-menu {
width: 100vw;
}
By setting the width of the dropdown to the size of the viewport it will ignore it's containers width and can be achieved from css only and without positioning divs.
You can create two different CSS3 classes: for Menu top-level and sub-menu, and set e.g. position:absolute, left:0; width:100%; for sub-menu. Hope this may help.
Nope, divs will always look at their parent for guidance. You COULD set your width to be something ridiculous like 300%, or you could use javascript to get the active window screen size and set it equal to that, but then you're opening yourself to a ton of resizing issues.
You have lines like this one...
<div class="nav-child dropdown-menu mega-dropdown-menu" style="left: -383.53125px;">
You COULD do something where you set the left:-100%, or use whatever the nav bar is. So if your nav bar is set to 65% or something like that, then you would set your left:-65%. It may take some playing around with it. You also could set your options for the parent like this...
position:absolute;
left:0;
And it should align it on the far left side.
If none of the parent elements of the dropdown has position:relative, you can simply give position:absolute; left:0; width: 100%; so it will be relative to body.
https://jsfiddle.net/afelixj/f0ktvxcv/

How do I get rid of the white space on the sides of my website? repeat background? resize div? I'm lost

How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.

HTML division of space and resizement

I'm currently developping a Chrome extension (which means that I don't need a cross browser solution).
Basically, I want my web page to be separated into two parts. A left panel which would take 20% of the width and 100% of the height and a right panel which would take 80% of the width and 100% of the height. Those panels would contain various elements, textareas, list, select.
The issue is that I don't know how to achieve this and to handle resizement. Currently, I'm using jQuery with a window.onresize hook. I keep changing the width and height based on the window's size.
I want to know if that could be done in a simplier way, using CSS for instance. And what should I use? A div, a table, etc...
Thanks in Advance.
You could put the existing panel, or element divs & spans inside a containing relative div. If
you use position:absolute for the panel divs, they will then be positioned
absolutely, relative to the containing div, not the page body.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Please adding css into your div, add min-height, and max-height properties
#mydiv{
min-height: 700px;
}