Solved

logo getting cutoff on ipad

Posted on 2016-10-28
30
81 Views
Last Modified: 2016-11-03
Not sure why logo in upper left is getting cutoff on tablet in landscape.  The logo measures 341x119.  

Screenshot
http://screencast.com/t/yo0rS8pEK7a

Site
http://36a.ed7.myftpupload.com/

I added the below code

/*............. MEDIA QUERIES .................*/

@media only screen and (max-width: 1024px) and (orientation: landscape)  {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {padding:5px;}
  .header-image .site-title a {margin:0; padding:0;}
  .header-image .site-title, .header-image .title-area {
    max-width: 341px; /*width of logo*/
    min-height: 119px; /*height of logo*/
}
}


@media only screen and (max-width: 768px) and (orientation: portrait) {

  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }
  	.header-image .site-title a {margin:0; padding:0;max-width: 341px;}
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 480){
  
	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}

  	.header-image .site-title a {margin:0; padding:0; max-width: 341px;}
  .site-header h1 { display:none;}
}



@media only screen and (max-width: 320px) {
  .site-header h1 { display:none;}
}
  

Open in new window

0
Comment
Question by:nsitedesigns
  • 16
  • 7
  • 5
  • +2
30 Comments
 
LVL 13

Expert Comment

by:Kyle Santos
Comment Utility
You need a larger max width in the title area.  However, when that width is set larger, the 'Since 1950' gets bumped down a little bit.

eg

Screenshot_1.png
0
 

Author Comment

by:nsitedesigns
Comment Utility
I am not sure why I need to have a larger title area which is 900 when the logo measures under 400.  I made the update and it didn't fix the issue according to my devices. I also checked it at http://quirktools.com and still is getting cut off.
0
 

Author Comment

by:nsitedesigns
Comment Utility
Here is screen shot. I also cleared my cache too.
http://screencast.com/t/qboEkSGp
0
 

Expert Comment

by:Juana Villa
Comment Utility
Kyle is correct, you have a specific width and the image is not scaling properly. You can add a background size and it fixes it. However, for some reason the important declaration is needed (not the best practice)

.site-title a {
    background: url(http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png) no-repeat !important;
    color: black;
    background-size: contain!important;
}

Open in new window

1
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
Basically your HTML/CSS is not structured ideally.

You've chosen a logo which is 341x119px and set it as a background of the anchor tag.

You do not need to set max-width or min-height on the anchor tag.
Simply set the height to 119px and width to 341px and it will behave normally

However you then have to put in one exception when the device is very small such as portrait on a phone
When the screen width is less than 445px the logo begins to be truncated on the right.
small screen
When you shrink down the screen to <445px you need to decide what to do because the anchor tag is no longer able to display the logo fully.

The background-size:contain is one option .. this will in effect scale down the background to fit the anchor tag
you can also use background-size:100%

As it is only required when the screen is < 445px I would recommend you
rework your CSS



  .header-image .site-title a {
    width: 341px; /*width of logo*/
    height: 119px; /*height of logo*/
    margin:0; 
    padding:0;
}


@media only screen and (max-width: 768px) and (orientation: portrait) {

  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }
  	/*.header-image .site-title a {margin:0; padding:0;max-width: 341px;} - this rule is not required */
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 450){
  	.header-image .site-title a {background-size:100%!important;}
}

Open in new window

0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
Personally redo the logo and  put the  words "Since 1850"  as part of the image just under "johnston's bakery" words and smaller font to the right

and change the logo from being a background image to an actual image and put it inside the .title-area div.   and use  a width of 100% as it is constrained by the .title-area
and then change the .title-area to work in all devices
0
 

Author Comment

by:nsitedesigns
Comment Utility
Thanks for all the advice everyone.  

Since 1950
I do not "need" to display the "since 1950" on smaller screens.  What is most important is to have the dual logos appear.  I figured if they were one image, it might be easier to work on mobile devices.  By the way, I put the "since 1950 on the right of screens to balance out the heavy logo on the left.

Logo Background
Hmmmm, I don't think the logo is a background image.  I followed directions I found online and it does not reference a background image.  In fact, the image added via Appearance/Customize/Header Image

eoinosullivan
eoinosullivan's recommendation made the most sense to me.   However, I am not sure what media query the code at the top of your comment should be associated with.

.header-image .site-title a {
    width: 341px; /*width of logo*/
    height: 119px; /*height of logo*/
    margin:0; 
    padding:0;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
Comment Utility
Grrrrr day 3 of trying to get this to work and I am really losing my patience!

Why is logo still getting cut off on 320-414px wide (portrait) but is NOT getting cut off on 240px or 176px  wide (portrait)?

I thought if I have a max width set to a media query, then those settings would apply to any size below that particular size.  Is that not correct?

@media only screen and (max-width: 1024px) and (orientation: landscape)  {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {padding:5px;}
  .header-image .site-title a {margin:0; padding:0;}
  .header-image .site-title, .header-image .title-area {width: 340px; height: 119px;}
    .title-area {max-width: 900px;}
}


@media only screen and (max-width: 768px) and (orientation: portrait) {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 450) and (orientation: landscape){  
	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}
  .site-header h1 { display:none;}
  .header-image .site-title a {background-size:100%!important;}
}


@media only screen and (max-width: 360) and (orientation: portrait) {  
	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}
  .site-header h1 { display:none;}
  .header-image .site-title a {background-size:100%!important;}
}

Open in new window

0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
You don't need to wrap all your CSS in "@media only screen and " declarations

If you want to .. set the first declaration to set the height and width on the A (anchor tag)


@media only screen and (max-width: 1024px) and (orientation: landscape)  {
          .header-image .site-title a {margin:0; padding:0; width: 340px; height: 119px;}
}
0
 

Author Comment

by:nsitedesigns
Comment Utility
Eoinosullivan,

I didn't wrap ALL my CSS in @media only screens.  I only included the code that related to media queries in this question.

I added the bold code but it didn't fix anything.
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
I think it because its a background image.
I would change  background image to an actual image and put it inside the .title-area div.   and use  a width of 100% as it is constrained by the .title-area

change

.site-title a {
    background: url(http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png) no-repeat !important;
}

to

.site-title a {
}

and add to the code:

<div class="site-title"><a href="/">
<img src="http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png"   width="100%"> </a>
</div>
0
 

Author Comment

by:nsitedesigns
Comment Utility
I think on day 3 of struggling with this that I am getting dumber and dumber.

This is a wordpress site. I don't know where the logo got set as a background image.  I used this video to add the customized size logo.

https://www.youtube.com/watch?v=jY5hR_sZhR4

Also, not sure how to just add a plain old image declaration to a div tag.  Is this what you advise?
.title-area {
    float: left;
    padding: 0;
   max-width: 341px;
  img: <img src="http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png" alt="Johnston's Bakery">
}

Open in new window

0
 

Author Comment

by:nsitedesigns
Comment Utility
I cannot find the reference to a background setting on Site-Title A.  I checked the child css and searched for Site-Title A.  Below are the references I found. As you can see, there are no background image settings on any of these that I found on the child css file.

.site-title a,
.site-title a:hover {
	background-color: #f96e5b;
	color: #fff;
	display: inline-block;
	padding: 16px;
	text-decoration: none;
}

.header-image .site-description,
.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}

.header-image .site-title a {
	background-color: transparent;
	max-width: 270px;
	min-height: 80px;
	padding: 0;
}

.metro-pro-blue .archive-pagination li a:hover,
.metro-pro-blue .button,
.metro-pro-blue .button:hover,
.metro-pro-blue .entry-comments-link a,
.metro-pro-blue .entry-comments-link a:hover,
.metro-pro-blue .genesis-nav-menu a,
.metro-pro-blue .site-footer a,
.metro-pro-blue .site-title a,
.metro-pro-blue .site-title a:hover,
.metro-pro-blue a.social-buttons {
	color: #fff;
}

Open in new window


Plus, since it is Wordpress, i don't know how to modify the html.  In dreamweaver it was easy.  Now I feel that my hands are tied.
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
I would FTP  all the files under   /wp-content/themes/metro-pro
to your local machine where you can edit them.
all the styles should be in the *.css files  (unless the theme generates them)

 you added the logo into the main index.php file instead of putting it in the style sheet   on line 89.
it should be in the style sheet
the style sheet  :

http://36a.ed7.myftpupload.com/wp-content/themes/metro-pro/style.css
0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
1. The background image is set in the php file .. if you look at the source of the Home page you'll see the reference at line 89
<style type="text/css">.site-title a { background: url(http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png) no-repeat !important; }</style>

Open in new window


2. You do not put an image tag in the CSS .. chilternPC has given you the HTML code to put in the header.php file which is the most likely location in most WordPress PHP themes to locate the logo.

3. Your overall problem is you have quite a basic layout and you've several competing CSS rules .. which are causing one rule to override another.

You still have the following CSS on your page (view Source to see)
http://36a.ed7.myftpupload.com/?sccss=1&ver=1716b1af53aeaaf08840a719028f0654
.header-image .site-title a {
    max-width: 341px; /*width of logo*/
    min-height: 119px; /*height of logo*/
}

which conflicts with (and overrides) line 1031 on your style.css which is part of the metro pro theme
http://36a.ed7.myftpupload.com/wp-content/themes/metro-pro/style.css?ver=2.1.1
.header-image .site-title a {
      background-color: transparent;
      max-width: 270px;
      min-height: 80px;
      padding: 0;
}


I'd suggest you remove ALL the references to .header-image .site-title a in the custom CSS media queries .. so you can see the real CSS
Remove CSSIn style.css for metro-pro remove the max-width and  min-height also ..

Now you have a clean slate to work from
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:nsitedesigns
Comment Utility
On line 1031 I modified the code

old
.header-image .site-title a {
	background-color: transparent;
	max-width: 270px;
	min-height: 80px;
	padding: 0;
}

Open in new window


new
.header-image .site-title a {
	background-color: transparent;
	padding: 0;
}

Open in new window


Did you also recommend I remove max width from @media queries?
0
 

Author Comment

by:nsitedesigns
Comment Utility
1. The background image is set in the php file .. if you look at the source of the Home page you'll see the reference at line 89

<style type="text/css">.site-title a { background: url(http://36a.ed7.myftpupload.com/wp-content/uploads/2016/10/cropped-logo-combo-341x119.png) no-repeat !important; }</style>


I looked at the child theme functions.php file and could only find one reference to .site-title a
//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 341,
	'height'          => 119,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

Open in new window



2. You do not put an image tag in the CSS .. chilternPC has given you the HTML code to put in the header.php file which is the most likely location in most WordPress PHP themes to locate the logo.

If I modify the header.php file, then it will get overwritten when theme updates.
0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
1. the functions.php is inserting the CSS indicated so you've found the source of your logo background image in the '.site-title a'

2. If you have a child-theme .. the header.php and functions.php in the child will override the parent and even if the parent metro-pro theme is updated the child files are unaffected.
0
 

Author Comment

by:nsitedesigns
Comment Utility
1. Nothing in this below from functions.php says it is setting a background.  So, do I delete this entirely?
//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 341,
	'height'          => 119,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

Open in new window


2. I do not have a child theme for header.php.  Not sure what is all needed to create one.  Only have a child theme for functions.php.
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
@eoinosullivan  I probably wasn't clear but I stated  put the img tag in the 'the code'  I meant 'the code '  (wherever that is) not style sheets... :-/
it may depend on the style sheet.

and of course this should all be done in the child menu (that's probably what all the overrides are you are seeing)  to keep all the changes from any updates to the original theme.
0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
@chilternPC - you were clear.  I'd agree that ideally an IMG tag in the header.php is the better way to achieve this but the person asking is not particularly familiar with WordPress or PHP and I was trying to stick to the CSS-based scenario that the metro-pro theme which is being used would seem to be favouring.

Every file that exists in the metro-pro theme can be copied into the child folder and edited and will replace the version in metro-pro.

@nsitedesigns
1. NO, do not delete that code from the functions.php or you'll have no logo at all.
2. You can copy any file from metro-pro into the equivalent location in the child-theme and edit it .. and that file will take precedence.  Copy header.php and edit the copy in the child-theme.
1
 

Author Comment

by:nsitedesigns
Comment Utility
I reached a breaking point yesterday where everything was falling apart on this site and everything I was doing to fix it only made things worse.  Trying to bite off one problem at a time with this site as there are many issues (logo cutting off, drop downs not working right, since 1950 needs to come off, etc).  So please be patient with me as I try to learn how to do what you are asking me to do and trying to figure out which option is one that 1) I can do and 2) that I understand.
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
thing is,  if you purchased the (expensive IMHO) Metro pro theme it should just work out of the box. everything you have asked is already part of that theme.
(did you also get it with the "genesis framework" - I'm guessing that might complicate things as it probably re-creates style sheets whenever  you save  changes in the theme customizer)

http://my.studiopress.com/themes/metro/
0
 

Author Comment

by:nsitedesigns
Comment Utility
I have membership to studio press which builds their themes off of genesis framework.  I have not run into this level of problems before with navigation.  But the logo thing, yeah, they really don't like it when you try to put in a larger logo. So, basically, I am pretty much screwed at this point.
0
 
LVL 39

Expert Comment

by:Eoin OSullivan
Comment Utility
If you've removed all the css customisation on the logo .. and set it back to all the metro-pro defaults .. it should be relatively easy to replace and resize the logo to the one you have.
The problem is you made too many edits and they overlapped and some of the css was poorly constructed.
Put the latest version of your code on the web server with all the logo edits removed and we should be able to give you a couple of simple css rules to apply
0
 

Author Comment

by:nsitedesigns
Comment Utility
Will do but not any more today.  I am burned out.
0
 
LVL 39

Accepted Solution

by:
Eoin OSullivan earned 500 total points
Comment Utility
Try this .. at the VERY VERY end of the custom CSS.  This will allow the following CSS rules to override and extend all previous rules
http://36a.ed7.myftpupload.com/?sccss=1&ver=1716b1af53aeaaf08840a719028f0654

/** Fix Logo **/
.header-image .site-title a {
    min-width: 341px; // this sets the minimum width to 341px for all layouts apart from really small screens and extends the max-width value set in the metro-pro theme header
    height: 119px; // this overrides the min-height set in style.css in the metro-pro theme and stops the bottom of the logo being cropped off
}

@media only screen and (max-width: 450px) {
    .header-image .site-title a {
         min-width: 0; // this clears the min-width on small screens and allows the logo to shrink
         background-size:100%!important; // this makes the logo shrink to fit viewable area 
    }
}

Open in new window


A few other comments

1. The "Since 1950" hh1 tag in the header is not visible on screens wider than 1024px .. you might want to change .site-header h1  in the custom scss file to be visible by default instead of hidden by default
.site-header h1 {
      display: block;
}
Then look at positioning it on the right
.site-header .wrap { position: relative; }
.site-header h1 { position: absolute; bottom: 0px; right: 0px; text-align: right; font-size:2em; color:#b5212b; display:block; }
Then hide the h1 when screen gets below a certain size .. at about 630px the text starts to overlap the logo
@media only screen and (max-width: 630px) {
    .site-header h1 { display: none; }
}

2.  You might want to look closer at your @media statements in your SCSS
They all appear to contain an orientation declaration which means that they only apply to one specific orientation (portrait or landscape) and on a desktop/laptop the proportion of the browser screen whether it is wider or taller will often mean that as you adjust the window you can flip between both so the rules are not well constructed.

Unless there is a specific reason I'd remove and clean up your @media declarations in the SCSS as follows .. almost all the rules are either redundant or overlap.

/*............. MEDIA QUERIES .................*/

@media only screen and (max-width: 768px) {
    .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block; }  // this simply removes the padding around the responsive Menu icon when it appears as the screen width gets smaller than 768px
}
1
 

Author Comment

by:nsitedesigns
Comment Utility
eoinosullivan,

I avoided looking at your comments all day yesterday.  I had just had it with this site (as you can probably figure out with my language).  So, I thought today, what the heck, let's see how big a headache I can give myself with this site again.  Low and behold you fixed every single one of my problems in one fatal swoop!  I had totally forgot about the hire an EE.  Will have to use that in the future.  Thank you thank you thank you!  You saved me from sleepless nights (from worrying about this project), sore jaw (from clenching my teeth) and my dogs now love me once again (I am not screaming at them for no reason).

THANK YOU!
1
 

Author Closing Comment

by:nsitedesigns
Comment Utility
You rock!
0
 

Author Comment

by:nsitedesigns
Comment Utility
p.s.  This is my first time writing media queries.  I thought I had to include a query for every size possible.  Now I know that isn't the case.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Encode a password 2 36
iOS and Managed domains 2 53
Img not displaying 11 15
gif banner animation loads randomly in mobile 3 29
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
With mobile becoming increasingly important to the business world, it is in your best interest to make sure that your email signature looks great across all types of devices. Find out how to create a mobile email signature with this guide.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now