Re: Header image/Navigation not responsive in Guided-Template 2-B

Anonymous · ‎06-20-2016

I recently downloaded "Template2-B.html", it's a responsive "Guided-Template" which I have customized. The image at the top is full width but is not responsive. I've applied some CSS that makes it sort of responsive but the height remains the same on any screen size so the image gets squeezed together rather than scaling proportionately.

With the navbar, once it gets to medium size (around 980px;), the navigation disappears.

If anyone has any suggestions, please share!

</a>

</div>

<li>

<a href="http://www.opensymmetry.com/solutions">SOLUTIONS</a></li>

<li>

<a href="http://www.opensymmetry.com/customers">CUSTOMERS</a></li>

<li>

<a href="http://www.opensymmetry.com/customers">OUR PARTNERS</a></li>

</ul>

</nav>

</div>

</header>

CSS used for image:

width: 100%;

height: auto;

Grégoire_Miche2 · ‎06-20-2016

There is surely a media query that overrides your CSS on smaller width devices.

Please provide the URL of your page.

-Greg

Anonymous · ‎06-20-2016

Here's a link to the page:

http://pages.opensymmetry.com/Rewards-test.html

Get Outlook for iOS<https://aka.ms/o0ukef>

Kim_Gandy1 · ‎10-25-2016

Grégoire, I'm having the same squished image issue in mobile with my email header image below. Could you highlight any edits needed to correctly populate picture in mobile?

<tbody>

</div>

</td>

</tr>

<div class="h1" style="font-size: 22px; line-height: 28px; color: #b52025; margin: 0 0 18px 0;"><span style="font-family: helvetica, arial, sans-serif;">It's been a while since we've heard from you.</span><br /></div>

<div>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

Grégoire_Miche2 · ‎10-25-2016

HI Kim,

I wont have time to properly debug the code. Lot is missing into it, starting with the CSS media queries on the <head> of the email.

Also, I recommend not to use mktEditable to insert images., but rather to upgrade to editor v2.0 and use mktoImage elements.

-Greg

Anonymous · ‎10-28-2016

Hi Kim Gandy !

Email coding is a bit different than landing page coding. Fortunately I have experience in both!

Right now your image tag is as follows:

It's not responsive because you have a defined height and width on the image. You need to tell the image to be responsive by removing the defined height/width and adding some responsive sizing.

Use this code instead:

Feel free to DM me if you have any further questions!

Cheers!

Anonymous · ‎06-21-2016

Hi Tom,

I was playing around with Template-2B and the background image should be 1600x1066px and your hero banner image is only 1600x600px.

As Greg says you can play around with the css media query, but you wont get a perfectly scaling image without a lot of hacking. I would suggest you look at adjusting the css to get a best fit, or loading a new image for smaller devizes e.g.

@media (max-width: 991px) {

.lpimg {background-image:.....

Anonymous · ‎06-21-2016

Thanks Nik, I actually adjusted the CSS and made it 1600x600 to fit the project needs. I looked at the original template with the background set at 1600x1066 and that one isn't responsive either. So the template hero image wasn't designed to be responsive but for the purposes of my project, I'd like it to be responsive.

Ulf_Deeg · ‎06-21-2016

without looking at your code in detail.... apply some padding to the wrapper/placeholder DIV based on the width/height ratio of each Hero in the Imageset

{

width: 100%;

padding-bottom: 56.25%; /* 16:9 */

}

Best

Ulf

Anonymous · ‎06-21-2016

Thanks, I had no luck adding this to the wrapper div.

width: 100%;

padding-bottom: 56.25%; /* 16:9 */