I am trying to have four single column width columns on large screens which are in the centre of the screen. I am using large-offset-4 to offset these columns by the equivalent of 4 columns but the positioning of these columns comes out quite a bit further to the right and the first column is larger than a single column should be.
I am running v2.2.1 of foundation for emails, the Sass version writing in Inky I have attempted multiple things but there appears to be some additional margin on the image in the first column which I haven't been able to override in sass. Everything looks as expected on small screens but on large the columns are not showing correctly. According to _grid.scss:101 the width of th.large-1 should be 32.33333px but it is displaying at 126.672px for the first column and 59px for all other columns.
<wrapper style="background: #ffffff">
<container>
<row>
<columns small="12" large="12" valign="middle" style="background: #ffffff;">
<h2 class="text-center">Connect with us</h2>
</columns>
</row>
<row>
<columns small="2" large="1" style="background: #ffffff;" class="large-offset-4 small-offset-2">
<img src="assets/img/facebook.png" alt="Facebook" title="Like us on Facebook." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/twitter.png" alt="Twitter" title="Follow us on Twitter." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/youtube.png" alt="YouTube" title="Find us on YouTube." style="max-width: 40px; height: auto;">
</columns>
<columns small="2" large="1" style="background: #ffffff;" class="">
<img src="assets/img/instagram.png" alt="Instagram" title="Follow us on Instagram." style="max-width: 40px; height: auto;">
</columns>
</row>
<row>
<columns small="1" large="1" valign="middle" class="large-offset-3">
<p><img src="assets/img/phone.png" style="max-width: 35px; height: auto;"></p>
</columns>
<columns small="5" large="2" valign="middle">
<p class="text-center">1800 067 066</p>
</columns>
<columns small="1" large="1" valign="middle">
<p class="text-right"><img src="assets/img/email.png" style="max-width: 35px; height: auto;"></p>
</columns>
<columns small="4" large="2" valign="middle">
<p class="text-center">Email us</p>
</columns>
</row>
</container>
Lines 9 - 22 should be producing four columns that are a single column wide that is offset by 4 columns (essentially centring them on twelve column grid) Each column should contain a small image (max-width of 40px) wrapped in an tag. Instead, the first column is about 4 columns wide and the content of it are in the centre of the screen, then all other columns are around 50px wide and to the right of the first column.
If my memory serves, the row needs to contain a total of 12 columns (including any offset).
so .large-1*2 + .large-2*2 + .large-offset-3 = 9 columns
Try taking up the last 3 columns on the right with an empty column of .large-3 to = 12
Related
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 hope someone can point me in the right direction on how to change the background color of a column in Zurb Foundation for Emails 2 while using the Sass version. Is there a way to set the background color for the column or row ?
I tried multiple things but for some reason cant apply a style to columns or row.
body,
html,
h4.topline {
text-align: center;
color: rgb(0, 255, 85);
background: red;
}
p.value {
text-align: center;
color:indigo;
font-weight: bold;
background: greenyellow
}
div.test{
background: greenyellow
}
.columns.descr {
text-align: center;
color: gainsboro;
font-weight: bold
}
.row.test{
border-width: thick;
border-color: aqua
}
</style>
<container class="body-notify">
<row>
<columns small="12" large="12" >
<spacer size="10"></spacer>
<h4 class="topline">Information</h4>
</columns>
</row>
<row>
<div class="test">
<columns class="descr" small="12" large="6">Description 1</columns>
</div>
<columns small="12" large="6"><p class="value">Value 1</p></columns>
</row>
<row>
<columns small="12" large="6">Description 1</columns>
<columns small="12" large="6"><p class="value">Value 2</p></columns>
</row>
</container>
I work last year on the email marketing and I know some things , you can't add any style of css in email styles. so I think you can add background color inline on your div like this :
<div class="row" style="backgound:red;"></div>
A bit late on this, but hopefully it will still help! The columns element is part of the Inky templating markup and if you inspect it in the browser you'll see that this is actually a <th> element with the class name columns. So you should be able to target it with th.columns:
th.columns.descr {
text-align: center;
color: gainsboro; font-weight: bold }
Similarly, <row> in html markup is a table element so try table.row { add css here }
Also be wary of using <div> tags in html emails - they get stripped by some email clients. From the Foundation docs
When it comes to making emails, divs aren’t a thing. Don’t kill the messenger, but it’s true. It's not fun finding out we can't just use a with auto left and right margins for centering, or background colors; it won't work with most email clients. <div>'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for structural purposes or spacing.
You can use the <wrapper> element (also inky templating markup) instead. In actual html this is a table element with the class of wrapper, so if you needed to target this with sass it would be
table.wrapper
I'm using a fresh installation of Foundation for Email, and have the following test set up:
<container>
<wrapper>
<row>
<columns large="5" valign="middle">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle">
<h4 style="margin-bottom: 0;" class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
</container>
I expected the logo and the title to be vertically centered in their container. However, as you can see in the screenshot, there is extra white space at the bottom:
Even the example in the documentation seems to be working incorrectly. The items are not vertically aligned in the center of their container.
What am I missing here? Why doesn't the valign attribute function as the documentation suggests?
The _normalize.scss file applies vertical-align: top; to table, tr, td and th tags. This messes with the vertical alignment.
For this reason, you will need to add vertical-align: middle; to the tag as well:
<wrapper>
<row style="border: 1px solid black;">
<columns large="5" valign="middle" style="vertical-align: middle;">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle" style="vertical-align: middle;">
<h4 class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
Padding and margins can influence the visual end result quite significantly too, but that's actually a separate issue from the vertical alignment of content within table cells.
I've not tested how well this fix will work in different devices/platforms however you can apply the below to your columns to remove the extra space in your row.
<wrapper>
<row style="border: 1px solid black;">
<columns large="5" valign="middle" style="padding-bottom: 0;">
<img src="https://placehold.it/690x173" alt="Company Logo">
</columns>
<columns large="7" valign="middle" style="padding-bottom: 0;">
<h4 style="margin: 0" class="text-right small-text-center">Thanks for your order!</h1>
</columns>
</row>
</wrapper>
I'm just starting out with foundation and its really powerful.
Is there a way to make the right cell go above the left cell when the responsive design is actioned? Currently the image goes beneath, but I'd like it to go above.
Is this possible?
I've tried (as you can see below, switching the "first" and "last" classes, but this does not work.
<table class="row">
<tr>
<th class="small-12 large-7 last columns" style="font-size:12px !important;padding-left:30px !important;color:#414141 !important">
<span style="font-size:20px;color:#0171c5">
This is a title about things in this email and things</span>
<br /><br />
Test
<br />
<br />
Read More
</th>
<th class="small-12 large-5 first columns" style="padding:0px 0px 0px 6px !important;text-align:center">
<img src="images/2nd-image.jpg" style="max-width:100%;height:auto;margin-left:auto" />
</th>
</tr>
</table>
I have a small UI problem when trying to set a long sentence in glass, it displays like that:
Does anybody have an idea of wrapping the sentence to the next line? word wrap css code didn't work.
HTML Code:
<article>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li>Don't take the green one</li>
<li>Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
Thanks for helping.
If you look here you'll find the default glass CSS. If you look under the lists section you'll find this gem:
ul li, ol li {
border-bottom: 1px solid #333;
padding: 6px 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
I'm not sure if you can include custom CSS styles in your HTML. If you can do something like this:
<article>
<style>
.wrap-li {
white-space: normal;
text-overflow: clip;
overflow: visible;
}
</style>
<section>
<h1>Notes:</h1>
<ol class="text-x-small">
<li class="wrap-li">Don't take the green one</li>
<li class="wrap-li">Don't forget to check about the promotion we have tomorrow</li>
</ol>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
If the API doesn't accept defining styles in this way, you'd have to try to do this inline. Each li element would need to be:
<li style="white-space:normal;text-overflow:clip;overflow:visible">Don't take the green one</li>
I don't know if it is possible to wrap the text if it is too long with ol/li params. But you can make it with a table definition if you want:
<article>
<section>
<h1>Notes:</h1>
<table class="text-x-small">
<tbody>
<tr>
<td>
Don't take the green one
</td>
</tr>
<tr>
<td>
Don't forget to check about the promotion we have tomorrow
</td>
</tr>
</tbody>
</table>
</section>
<footer>
<p>Notes</p>
</footer>
</article>
Output: