• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 158
  • Last Modified:

Remove right text widget from smaller screens

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
nsitedesigns
Asked:
nsitedesigns
  • 8
  • 7
1 Solution
 
Julian HansenCommented:
Works for me - header not visible below 768 visible above
ss84.jpgss84a.jpg
0
 
nsitedesignsAuthor Commented:
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
 
Julian HansenCommented:
What if you hide the header by default and only enable it on larger screens?
0
Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as the high-speed power of the cloud.

 
nsitedesignsAuthor Commented:
I am not sure how to do that.
0
 
Julian HansenCommented:
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
 
nsitedesignsAuthor Commented:
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
 
Julian HansenCommented:
Didn't work how - is the header not being removed or is it still showing at lower resolution?
0
 
Julian HansenCommented:
Just checked your link again - can't see where you added the above styles
0
 
nsitedesignsAuthor Commented:
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
 
Julian HansenCommented:
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
 
nsitedesignsAuthor Commented:
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
 
Julian HansenCommented:
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
 
nsitedesignsAuthor Commented:
???
Line 211 is for the bottom footer widget.
http://screencast.com/t/KPKV20atVX41
0
 
Julian HansenCommented:
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
 
nsitedesignsAuthor Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now