Support » Developing with WordPress » Display custom taxonomy on mobile

  • Hi,

    I’m developing a site for a magazine and I’m using a custom taxonomy to categorize the posts in the magazine’s issues. I’ve developed a page template that displays the covers of all the published issues with a link to the posts from that specific issue. This works perfectly on computers, but I’ve discovered that this doesn’t work on my iPhone. The covers and the text is displayed as it should, but there are no links to the issues (I can’t click on anything).

    You can find the page here http://www.insidan.net/ny2015/nummer/ and the code I’m using looks like this:

    <div>	
    	<ul class="nummer">
    		<?php foreach (get_terms('nummer') as $cat) : ?>
    			<li>
    				<a href="<?php echo get_term_link($cat->slug, 'nummer'); ?>">
    				<img class="bildskugga" src="<?php echo z_taxonomy_image_url($cat->term_id, 'medium'); ?>" />
    				<p><?php echo $cat->name; ?></p></a>
    			</li>
    		<?php endforeach; ?>
    	</ul>
    </div>

    Can anybody see what is wrong and how I can put it right?

    / Isak

    • This topic was modified 2 years, 5 months ago by  isakengstrom.
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    It’s your sidebar container. Even though its content fills only a narrow strip to the right, the container covers the full device width, in effect placing a transparent cover over the image links, preventing clicks from registering on the correct elements. Clicks register on a linkless part of the sidebar.

    The solution is to simply tell the sidebar to float left (with CSS) when the screen is less than a certain width. Then the content will move to below the cover grid and clicks will register where they are intended.

    For example:

    @media (max-width: 767px)
    .td-pb-row [class*="td-pb-span"] {
        float: left;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Display custom taxonomy on mobile’ is closed to new replies.