Solved

Remove right text widget from smaller screens

Posted on 2016-10-31
15
50 Views
Last Modified: 2016-11-04
Trying to remove the "since 1950" from the right header area on smaller screen sizes.  This is from the Header Right widget in Studio Press' Metro Pro theme.  I added the below code but it doesn't seem to be removing the text "since 1950" from header.  

Beta site
http://36a.ed7.myftpupload.com

@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: 400px; min-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; }
  	.header-image .site-title a {margin:0; padding:0;max-width: 341px;}
  .site-header h1 { display:none;}
  	
}


@media only screen and (max-width: 480) and (orientation: landscape){  
	.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: 360) and (orientation: portrait){
    .site-header h1 { display:none;}
}


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

Open in new window

0
Comment
Question by:nsitedesigns
  • 8
  • 7
15 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867089
Works for me - header not visible below 768 visible above
ss84.jpgss84a.jpg
0
 

Author Comment

by:nsitedesigns
ID: 41867101
On my galaxy phone in portrait and on the quirktools.com site, it does display over and over again on small screens but not all small screens.  

http://screencast.com/t/sPxAp5CxK
http://screencast.com/t/6cn4ODFuzH
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867128
What if you hide the header by default and only enable it on larger screens?
0
 

Author Comment

by:nsitedesigns
ID: 41867162
I am not sure how to do that.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867185
Make your default style hidden and then enable it at the res you want it visible

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

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 41867211
Nope.  Didn't work.  Here is all my header code
/*............... HEADER...............*/

.header-full-width .title-area, .header-full-width .site-title {
    height: 119px; /*height of logo*/

}

.header-image .site-header {
    padding: 0;
 
}

.site-header {
	min-height: 119px; /*height of logo*/
	overflow: hidden;
}

.site-header .widget-area {
    margin-top: 0px;
    padding: 0;
}

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

.title-area {
    float: left;
    padding: 0;
   max-width: 341px;
}

.site-header h1 {
	display: none;
}

Open in new window


My media query code appears below the header code on my Simple Custom CSS

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

/*width of logo = 341px */
/*height of logo = 119px */


@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; width: 340px; height: 119px;}
  .header-image .site-title, .header-image .title-area {width: 340px; height: 119px;}
    .title-area {max-width: 900px;}
.site-header h1 {font-size:2em; color:#b5212b; text-align: right; display:block;}

}


@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 {font-size:2em; color:#b5212b; text-align: right; display:block;}
}


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

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867227
Didn't work how - is the header not being removed or is it still showing at lower resolution?
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867236
Just checked your link again - can't see where you added the above styles
0
 

Author Comment

by:nsitedesigns
ID: 41867247
No it didn't work meant that your fix did not make any difference.

I am using simple custom css plugin which lets me add css modifications all in one place.  Someone at EE recommended it and it seems to work pretty good.

Here are screen shots showing the code you recommended I add:
http://screencast.com/t/P8CO77Dr
http://screencast.com/t/8yEn0J3ZA3yU
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867254
Typo on my part
.site-header h1 {
	display: none;
}
...
@media only screen and (min-width: 768px) {
	.site-header h1 {
		display: block;
	}
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 41867295
Where do I add styling to the .site-header h1 tag?

This is what I had under @media 768
.site-header h1 {font-size:2em; color:#b5212b; text-align: right; display:block;}

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41867300
No you want to make your default styling for the h1 to be hidden - i.e. outside of a media block

On line 211 of http://36a.ed7.myftpupload.com/?sccss=1&ver=1716b1af53aeaaf08840a719028f0654

Add it there.
0
 

Author Comment

by:nsitedesigns
ID: 41867314
???
Line 211 is for the bottom footer widget.
http://screencast.com/t/KPKV20atVX41
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41867392
I don't have access to your source files - the console window tells me that style is defined on line 211 - the file looks generated so it is probably misleading to put the line number in. I have no other way of referencing where the original style is defined.

The point is you need to set the default style for the <h1> to be display: none - and then make it visible in the media queries for the resolutions it should be visible. Without access to your source I cannot tell you exactly where to go - you need to adapt the recommendation to your specific environment.

Edit
I also have no way of testing as I am unable to replicate the problem - it works in the browser sim and on the devices I have tested here.
0
 

Author Closing Comment

by:nsitedesigns
ID: 41874062
Had to fix going about it a different way but I am going to give you points for your efforts and attempts to fix the problem.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 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

11 Experts available now in Live!

Get 1:1 Help Now