Solved

Remove right text widget from smaller screens

Posted on 2016-10-31
15
134 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 56

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 56

Expert Comment

by:Julian Hansen
ID: 41867128
What if you hide the header by default and only enable it on larger screens?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

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

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 56

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

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 56

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 56

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 56

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ebay messages api 6 19
Flex Messes  With Horizontal Positioning 2 25
SQL server client app 3 32
Ways to Manage 2 Development Projects on Same Section 1 20
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

726 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