Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

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

Anonymous
Not applicable
‎06-20-2016 12:48 PM
‎06-20-2016 12:48 PM

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

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!

<!---Navbar code--->

   <header id="header" class="header-section section section-dark navbar navbar-fixed-top">

        <div class="container-fluid">

          <div class="navbar-header navbar-left">

            <!-- HEADER LOGO -->

            <a class="navbar-logo navbar-brand anchor-link" href="http://www.opensymmetry.com">

              <div class="mktoImg" id="headerLogo" mktoname="Header Logo (40px height)"><img src="http://opensymmetry.wpengine.com/wp-content/uploads/2016/03/OS-logo-80x45.png" width="70"></div>

            </a>

          </div>

          <nav id="navigation" class="navigation navbar-collapse collapse navbar-right">

            <!-- NAVIGATION LINKS -->

            <ul id="header-nav" class="nav navbar-nav">

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

                <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>

<!---End Navbar code--->

<!---image code--->
CSS used for image:

width: 100%;

height: auto;

<!---END image code--->

os-desktop.png

os-mobile.png

0 Likes
4,017
Reply
9 REPLIES 9
Grégoire_Miche2
Level 10
Level 10
‎06-20-2016 02:20 PM
‎06-20-2016 02:20 PM

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

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

Please provide the URL of your page.

-Greg

0 Likes
3,289
Reply
Anonymous
Not applicable
‎06-20-2016 02:58 PM
‎06-20-2016 02:58 PM

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

Here's a link to the page:

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

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

0 Likes
3,289
Reply
Kim_Gandy1
Level 7
Level 7
‎10-25-2016 10:02 AM
‎10-25-2016 10:02 AM

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

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?

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="section-main contents" style="font-size: 14px; line-height: 22px; text-align: center; background-color: #ffffff; color: #333333;">

<tbody>

<tr class="one-col">

<td class="image type" style="font-family: Arial,sans-serif; font-size: 14px; color: #333333;">

<div class="mktEditable" id="hero-image">

<p style="margin: 0;"><img src="http://ielts-results.weebly.com/uploads/4/0/6/6/40661105/1113084_orig.jpg " alt="Join us as we chronicle the industry's comeback." width="677" height="452" constrain="true" imagepreview="false" /><br /></p>

</div>

</td>

</tr>

<tr class="one-col">

<td class="inner copy type" style="font-family: Arial,sans-serif; padding: 60px 50px 50px 50px;">

<div class="mktEditable" id="section-1-text">

<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>

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="border-top" style="border-top-width: 2px; border-top-style: solid; border-top-color: #eeeeee;">

<tbody>

<tr>

<td style="font-size: 18px; line-height: 18px;"><span style="font-family: helvetica, arial, sans-serif;"> </span></td>

</tr>

</tbody>

</table>

</div>

0 Likes
3,289
Reply
Grégoire_Miche2
Level 10
Level 10
‎10-25-2016 02:49 PM
‎10-25-2016 02:49 PM

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

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

0 Likes
3,289
Reply
Anonymous
Not applicable
‎10-28-2016 09:34 AM
‎10-28-2016 09:34 AM

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

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:

<img src="http://ielts-results.weebly.com/uploads/4/0/6/6/40661105/1113084_orig.jpg " alt="Join us as we chronicle the industry's comeback." width="677" height="452" constrain="true" imagepreview="false" />

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:

<img src="http://ielts-results.weebly.com/uploads/4/0/6/6/40661105/1113084_orig.jpg " alt="Join us as we chronicle the industry's comeback." style="width: 100%; max-width: 667px;" constrain="true" imagepreview="false" />

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

Cheers!

3,290
Reply
Anonymous
Not applicable
‎06-21-2016 12:31 AM
‎06-21-2016 12:31 AM

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

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:.....

0 Likes
3,290
Reply
Anonymous
Not applicable
‎06-21-2016 06:26 AM
‎06-21-2016 06:26 AM

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

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.

0 Likes
3,290
Reply
Ulf_Deeg
Level 3
Level 3
‎06-21-2016 04:56 AM
‎06-21-2016 04:56 AM

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

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

0 Likes
3,290
Reply
Anonymous
Not applicable
‎06-21-2016 06:40 AM
‎06-21-2016 06:40 AM

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

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

  width: 100%;

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

0 Likes
3,290
Reply
Home