?
Solved

Remove right text widget from smaller screens

Posted on 2016-10-31
15
Medium Priority
?
145 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 58

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 58

Expert Comment

by:Julian Hansen
ID: 41867128
What if you hide the header by default and only enable it on larger screens?
0
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 

Author Comment

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

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 58

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 58

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 58

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 58

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 58

Accepted Solution

by:
Julian Hansen earned 1500 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

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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.
Suggested Courses

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