Down arrow in mobile

[Carl Franzon]

From another post in the forum I added a down arrow to the home page hero, using the following custom CSS:

#hero-section:after {
position: absolute;
font-family: ‘ElegantIcons’;
content: “;”;
z-index: 20;
bottom: 30px;
width: 100%;
font-size: 30px;
text-align: center;
color: #fff;
}

That was working fine; recently though when I went to the site, the arrow was off to the right almost as if in a column by itself and the rest of the page was all squished to the left (see picture). If I comment out the custom CSS, everything looks good, except the arrow is missing.

Thoughts on what to change to get it working again?

Attachments:

1. 

   mobile.png
   

[Bill Robbins]

Hi Carl,

Looking at the screenshot, it appears that the width: 100% is picking up something other than the width of the hero area.

Try changing it to this:

#hero-section:after {
     position: absolute;
     font-family: 'ElegantIcons';
     content: ";";
     z-index: 20;
     bottom: 30px;
     left: 0;
     right: 0;
     font-size: 30px;
     text-align: center;
     color: #fff;
}

and see how that works out.

Have a great weekend,
Bill

[Carl Franzon]

It helped, but did not make it go away. It’s strange because it had been working, and now is not.

I have attached screenshots for both mobile and desktop after change you suggested. You can see the arrow at the right, almost in its own column in the mobile version. In the desktop version, it’s to the left in the hero secion – odd given the test-align:center

Attachments:

1. 

   IMG_1691.png
   

2. 

   arrowFCC.jpg
   

[Bill Robbins]

Hey Carl,

Looking at the code in your site as it is now, it looks like these two items didn’t make it in:

     left: 0;
     right: 0;

Those essentially replace the width: 100% that was in the original snippet. That should make that area span the full width which would allow the text align center to work.

If that doesn’t do the trick, then I would suggest wrapping the whole snippet in a media query like this:

@media only screen and (min-width: 768px) {

	#hero-section:after {
		 position: absolute;
		 font-family: 'ElegantIcons';
		 content: ";";
		 z-index: 20;
		 bottom: 30px;
		 left: 0;
		 right: 0;
		 font-size: 30px;
		 text-align: center;
		 color: #fff;
	}

}

which would only add in the arrow on larger displays and skip mobile altogether.

Let me know how it goes,
Bill

[Carl Franzon]

Thanks Bill, that seemed to help with the home page, but I have noticed that my other pages are now leaving a blank space to the right in the mobile version:
I have attached a screenshot for this page: http://fruitlandcovenant.org/operation-christmas-child/ from my iphone

Attachments:

1. 

   IMG_1692.png
   

[Bill Robbins]

Carl,

Did you try it in the media query so that the arrow would only be on larger devices? It’s not appearing in the Custom CSS in the source code of the page.

Bill

[Carl Franzon]

I did NOT do it using the media query. But, that custom CSS should only affect the hero section right, not other pages? My sermon pages, etc all have that space to the right. I just turned off my cache-ing plugin too because it was sometimes taking a while for changes to show

[Bill Robbins]

Looking further down the page, I think it may be the URL to Samaritan’s purse that’s causing the trouble here. Since words aren’t broken in the content area by default, this is only breaking where there happens to be a hyphen in the URL. Otherwise it would all be on one line and extend further out.

You might try swapping out the text in the link from the URL itself to the title of the page that you’re linking to. That has the added bonus of helping out their SEO a bit too.

See how that works.

[Carl Franzon]

ok, will try that but there seem to be other pages where it is breaking:
http://fruitlandcovenant.org/series/missionalmarkers/
http://fruitlandcovenant.org/blueberry-fun-festival/ [this one may be some longer URLs]
http://fruitlandcovenant.org/calendar/

[Carl Franzon]

I fixed the URLS but that did not seem to help. Then I noticed that there was some text that bled over into the side part; looking at the source, there was some weird <span class=”Apple-converted-space”> styling. I deleted that and the Operation Christmas Child Page now looks good.

Cleaning up the URLs on the Blueberry Page worked.

But, I still am not sure what is causing the issue on
http://fruitlandcovenant.org/series/missionalmarkers/
and
http://fruitlandcovenant.org/calendar/

[Bill Robbins]

There’s not a lot of space on a smartphone in portrait orientation. On both of those pages, the content is just a bit wider than the viewport. You could take out some of the padding on the series page.

For the calendar, it’s the header that’s just too wide. Tables are not very cooperative with responsive design. One option would be to hide the overflow there. Hopefully you’ll just lose the today button and keep the others.

Here’s what to do for those:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   There's not a lot of horizontal space on a phone in portrait mode.  You can pull some of the padding out of the series view to help out a bit.  
   
   For the calendar, it's in a table and the header just isn't set to adjust to a screen that small.  You could hide the overflow of the table which might help.  Here's how to do both of those:
   
   
   Go to your theme options page and choose the Advanced tab.
   Scroll down to the Custom CSS box and add this:
   
   
   @media only screen and (max-width: 520px) {
   	
   	.tax-series #content,
   	.tax-series #sidebar {
   		padding: 10px;
   	}
   	
   	td.podcast-date {
   		padding-left: 5px;
   		padding-right: 5px;
   	}
   	
   	#content .eo-fullcalendar-shortcode {
   		max-width: 100%;
   		overflow: hidden;
   	}
   
   }
   
   
   Update your settings.
   
   Hope that helps out,
   
   Bill
   
   
   

3. Update your settings.

Hope that helps out,
Bill

[Bill Robbins]

Ha. Sorry about that. My wifi was changing networks and I tried to copy my previous response before it left. I didn’t think I had grabbed it before it vanished, but evidently I did.

This is the CSS for those:

@media only screen and (max-width: 520px) {
	
	.tax-series #content,
	.tax-series #sidebar {
		padding: 10px;
	}
	
	td.podcast-date {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	#content .eo-fullcalendar-shortcode {
		max-width: 100%;
		overflow: hidden;
	}

}

See how that goes,
Bill

[Carl Franzon]

That did it. Awesome support once again.

[Bill Robbins]

I’m glad to hear that helped out Carl.

Have a great weekend 🙂

[Author]

Posts