I have a button which I want to align to the right on a desktop, which is easy with the right utility class:
<div class="small-12 columns">
bla
</div>
But on a smartphone I want the button NOT float to the right, so how can I achieve this?
Basically it is just not using the right class, but I need that for the desktop...
You can add custom class to you button use media queries to style on smartphone/
HTML :
<div class="small-12 columns">
bla
</div>
CSS :
#media only screen and (max-width: 40em) {
.mybutton{
float:none !important;
}
}
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
I have the following code:
<div class="row">
<div class="large-12 columns">
<div class="item">ITEMS GO HERE</div>
<div class="item">ITEMS GO HERE</div>
... many .item here ...
</div>
</div>
Each .item would have a fixed width, say 150px. I want the div large-12 to be scrollable if there are more .item that it can fit within the current screen. How can I do that? Currently, if I add too many .item, then they go to the next line!
Thanks
You'll need to add an overflow-x:scroll; and white-space:nowrap; to the parent container. And a display:inline-block; to the .items.
Here's a working demo.
Can somebody please explain how a sticky footer:
<div id="container....
...content
</div>
<div id="footer"....
</div>
CSS:
#container
{
height: 100%;
margin-bottom: -height of footer
}
might be implemented in Orchard CMS?
The problem I can't manage is to envelop some main content layouts in a wrapper.
Currently I have:
<div id="aside-1 ...
<div id="layout-navigation
<div id="layout-main-container
<div id="layout-footer
So main problem is to customize layouts rendering.
In your Layout.cshtml file, use the Display method to render zones. The primary zone where content gets rendered is the Content zone, which you render like this:
<div id="container....
#Display(Model.Content)
</div>
<div id="footer"....
</div>
You can also define your own custom zones (via your Theme.txt manifest file).
For example, in your Theme.txt file, define a Footer zone like this:
Zones: Content, Footer
Then in Layout.cshtml, render that zone like this:
<div id="container....
#Display(Model.Content)
</div>
<div id="footer"....
#Display(Model.Footer)
</div>
You have complete freedom on how you want to layout content.
here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade
You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}
This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/