Menu icon Foundation

Designer

My Posts





My Comments

Shakogun commented on Ryan's post about 3 years

From experience I learnt to specify both width and height.What if you specify height too? Does it fix it?Oh yes, always put working urls in your anchor tags, otherwise your lay out'll break in certain clients.
a>center>img should've helped your aligning problem.

Shakogun commented on Ryan's post about 3 years

<a href="">
<center>
<img src=""/>
</center>
</a>
 
For Retina, I personally just make a retina version and constrain it in the width & height I need.<img width="50" height="50" src="retina-image@2x.png">

Shakogun commented on Shakogun's post about 3 years

Because in a lot of clients the container element isn't centered, I have to put an additional center tag around it to make it work.On top of that I also wanted my button to be centered so I put a center tag around that one..Isn't that how it should be done?

Shakogun commented on Santiago Valdes's post about 3 years

Yeah, you guys' solution is better, that's why I deleted my solution. Way more lines of code too.I learnt something new too :)

Shakogun commented on Shakogun's post about 3 years

Bug occurs when loaded into Litmus and viewed as Iphone 6.
 
<style>

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
.section-3 .wrapper-inner { padding: 0 0 60px; }

</style>

<wrapper class="section-3 bgcolor-1">
<center>
<container>
<center>
<button class="bgcolor-2" href="http://foundation.zurb.com/"&gt;TEST TEST</button>
</center>
</container>
</center>
</wrapper>

<!-- notes:
bgcolor-1= $primary-color
bgcolor-2= $tertiary-color
-->

Shakogun commented on Shakogun's post about 3 years

2.1It's very hard to replicate. It has to do with the length of the content and the background colors on certain elements. In the article they say the level of zoom is a parameter but I encounter the bug at the initial zoom level.

Shakogun commented on Santiago Valdes's post about 3 years

What kind of element do you want to align to the right?

Shakogun commented on Ray Kanani's post about 3 years

I put a mobile--collapse class on my rows and in the style tag under </head>
@media only screen and (max-width: 600px) {
table.row.mobile--collapse td.large-10.first, table.row.mobile--collapse th.large-
10.first {
padding-left: 0 !important;
padding-right: 0 !important;
}
table.row.mobile--collapse td.large-10.last, table.row.mobile--collapse th.large-10.last {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

Shakogun commented on Ray Kanani's post about 3 years

The Codepen seems to be dead?

Shakogun commented on Ian Daly's post about 3 years

@Corey: The <center> tag worked perfectly in my case. I've been using all the elements including the newer ones: wrapper (with the inner wrapper class) and spacers (which I made into partials which I could re-use).Although a wrapper with a bulletproof background image in the back does give some unwanted padding/margin to my full width header. It has some content in center tags and also the inner wrapper class in use.Yes, indeed, to display retina images correctly you must declare width="" and height="" to the img tags without using the style="" and no px added at the end either, just the plain values.The images don't scale on 120DPI displays tho. The lay out does. Which gives the images unwanted space on the right in my case. But at that point I kinda gave up and didn't try to fix it.

Posts Followed


  • 3
    Replies
  • How to center and link Retina logo?

    By Ryan

    retina

    This is a two-part question. What I'm trying to do is create a template with my logo centered,&nbsp;displayed as a Retina asset for high-resolution displays: &lt;center&gt; &lt;a href='...'&gt; &lt;img src='...' width='100' /&gt; &lt;/a&gt; &... (continued)

    Last Reply by Shakogun about 3 years ago









Following

    No Content

Followers

My Posts

My Comments

You commented on Ryan's post about 3 years

From experience I learnt to specify both width and height.What if you specify height too? Does it fix it?Oh yes, always put working urls in your anchor tags, otherwise your lay out'll break in certain clients.
a>center>img should've helped your aligning problem.

You commented on Ryan's post about 3 years

<a href="">
<center>
<img src=""/>
</center>
</a>
 
For Retina, I personally just make a retina version and constrain it in the width & height I need.<img width="50" height="50" src="retina-image@2x.png">

You commented on Shakogun's post about 3 years

Because in a lot of clients the container element isn't centered, I have to put an additional center tag around it to make it work.On top of that I also wanted my button to be centered so I put a center tag around that one..Isn't that how it should be done?

You commented on Santiago Valdes's post about 3 years

Yeah, you guys' solution is better, that's why I deleted my solution. Way more lines of code too.I learnt something new too :)

You commented on Shakogun's post about 3 years

Bug occurs when loaded into Litmus and viewed as Iphone 6.
 
<style>

body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
.section-3 .wrapper-inner { padding: 0 0 60px; }

</style>

<wrapper class="section-3 bgcolor-1">
<center>
<container>
<center>
<button class="bgcolor-2" href="http://foundation.zurb.com/"&gt;TEST TEST</button>
</center>
</container>
</center>
</wrapper>

<!-- notes:
bgcolor-1= $primary-color
bgcolor-2= $tertiary-color
-->

You commented on Shakogun's post about 3 years

2.1It's very hard to replicate. It has to do with the length of the content and the background colors on certain elements. In the article they say the level of zoom is a parameter but I encounter the bug at the initial zoom level.

You commented on Santiago Valdes's post about 3 years

What kind of element do you want to align to the right?

You commented on Ray Kanani's post about 3 years

I put a mobile--collapse class on my rows and in the style tag under </head>
@media only screen and (max-width: 600px) {
table.row.mobile--collapse td.large-10.first, table.row.mobile--collapse th.large-
10.first {
padding-left: 0 !important;
padding-right: 0 !important;
}
table.row.mobile--collapse td.large-10.last, table.row.mobile--collapse th.large-10.last {
padding-left: 0 !important;
padding-right: 0 !important;
}
}

You commented on Ray Kanani's post about 3 years

The Codepen seems to be dead?

You commented on Ian Daly's post about 3 years

@Corey: The <center> tag worked perfectly in my case. I've been using all the elements including the newer ones: wrapper (with the inner wrapper class) and spacers (which I made into partials which I could re-use).Although a wrapper with a bulletproof background image in the back does give some unwanted padding/margin to my full width header. It has some content in center tags and also the inner wrapper class in use.Yes, indeed, to display retina images correctly you must declare width="" and height="" to the img tags without using the style="" and no px added at the end either, just the plain values.The images don't scale on 120DPI displays tho. The lay out does. Which gives the images unwanted space on the right in my case. But at that point I kinda gave up and didn't try to fix it.

Posts Followed

Following

  • No Content

Followers

  • No Content