Move Subscribe Link to Top for Mobile

• 

  cybertronological · Member · Mar 31, 2016 at 5:25 am

  • Copy link
  • Add topic to favorites

  The side links on our site show up at the bottom on mobile, and this is a problem because most people subscribe to podcasts on their phones. So, I want the links to show up at the top on mobile, particularly the Subscribe link. What do I need to do to make this happen?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 31, 2016 at 10:49 pm

  • Copy link

  Hi there, typically this doesn’t work out well on responsive themes, such as Capoverso, but I was able to do this because the header area stays the same height on all screens/window widths. The following uses a Media Query to limit this to 767px and narrower screens, which is when the sidebar moves to the bottom below the content. I’ve set a slightly translucent color for the background of the follow button so that it stands out a bit more. I tried making it the same width as the black area for the title, but that doesn’t work when we use position: absolute, as we have to do in order to move the widget.

  @media screen and (max-width: 767px) {
  	#follow_button_widget-3 {
  		position: absolute;
  		top: 370px;
  		width: 100%;
  		text-align: center;
  		background: rgba(0, 0, 0, 0.7);
  		padding-top: 6px;
  	}
  	#follow_button_widget-3 iframe {
  		max-width: 65px;
  	}
  	#page {
  		position: relative;
  	}
  	.content-area {
  		padding-top: 15px
  	}
  }

• 

  cybertronological · Member · Apr 1, 2016 at 4:19 am

  • Copy link

  Does it matter where I put this in the CSS?

• 

  cybertronological · Member · Apr 1, 2016 at 4:21 am

  • Copy link

  Also, I don’t want the WordPress Follow link at the top, but rather the Subscribe link on the right for people to subscribe to the podcast.

• 

  thesacredpath · Member · Apr 1, 2016 at 11:19 pm

  • Copy link

  Ah, you are talking about the Subscribe Menu Item. We can make a couple minor edits to the code I gave above and do that. Add the following to your custom CSS and see what you think.

  @media screen and (max-width: 767px) {
  	.page-item-35 {
  		position: absolute;
  		top: 370px;
  		width: 100%;
  		text-align: center;
  		background: rgba(0, 0, 0, 0.7);
  		padding-top: 6px;
  	}
  	#follow_button_widget-3 iframe {
  		max-width: 65px;
  	}
  	#page {
  		position: relative;
  	}
  	.content-area {
  		padding-top: 15px;
  	}
         .page-item-35 a {
                 color: #fff;
                 font-weight: bold;
         }
  }