Solved

Remove right text widget from smaller screens

Posted on 2016-10-31
15
141 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 57

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 57

Expert Comment

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

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

 

Author Comment

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

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 57

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 57

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 57

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 57

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 57

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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

Ransomware is a growing menace to anyone using a computer or mobile device. Here are answers to some common questions about this vicious new form of malware.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

691 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