[Resolved] Elements: Change block display order for Mobile

Home Forums Support Elements: Change block display order for Mobile

  • This topic has 7 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1224537
    Tim

    Currently I have an “Element” that displays content as expected for all widths:

    <div class="entry-content" itemprop="text">
    
    	<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top">
    		<figure class="wp-block-media-text__media">
    			<?php
    				$portrait = get_field('portrait');
    				$size = 'full'; // (thumbnail, medium, large, full or custom size)
    				if( $portrait ) {
        			echo wp_get_attachment_image( $portrait, $size );
    				}
    			?>
        </figure>
    
    		<div class="wp-block-media-text__content">
    
    			<?php if( get_field('job_position') ): ?>
            		<h2><?php the_field('job_position'); ?></h2>
        		<?php endif; ?>
    
    			<?php if( get_field('nationality') ): ?>
            		<p>Nationality: <?php the_field('nationality'); ?></p>
        		<?php endif; ?>
    
    			<?php if( get_field('qualification') ): ?>
            		<p>Qualification: <?php the_field('qualification'); ?></p>
        		<?php endif; ?>
    
        		<?php if( get_field('skills') ): ?>
            		<p>Skills: <?php the_field('skills'); ?></p>
        		<?php endif; ?>
    
    			<?php if( get_field('linkedin') ): ?>
            		<p>
    					<i class="fab fa-linkedin"></i>
    					<a href="<?php the_field('linkedin'); ?>"> LinkedIn Profile</a>
    			  	</p>
       			<?php endif; ?>
    
    			<?php if( get_field('quote') ): ?>
    				<blockquote class="wp-block-quote">
    				<p><?php the_field('quote'); ?></p>
    				<?php if( get_field('citation') ): ?>
        				<cite><?php the_field('citation'); ?></cite>
        			<?php endif; ?>
        			</blockquote>
    			<?php endif; ?>
    		</div>
    	</div>
    
    	<?php if( get_field('description') ): ?>
        	<?php the_field('description'); ?>
    	<?php endif; ?>
    
    </div>

    However, for small widths, when content is stacked, I would like to display the portrait immediately after the position and before the nationality, qualification etc.

    What would be the best way to achieve that ?

    Thanks

    Tim

    #1224740
    David
    Staff
    Customer Support

    Hi there,

    Simplest method would be to output a second position element above this element:

    <div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-top">

    And with it include the GP hide on classes for desktop and tablet:

    <?php if( get_field('job_position') ): ?>
    <h2 class="hide-on-desktop hide-on-tablet"><?php the_field('job_position'); ?></h2>
    <?php endif; ?>

    Then on your existing position element give the H2 a class of hide-on-mobile

    After that you will need some CSS to switch the Media/Text Rows around on mobile

    #1225735
    Tim

    Hi David

    Thank you for the suggestion. I guess I got lazy or it seemed like too many potential pitfalls, I opted to put the image on the left and position above the image instead.

    #1225743
    David
    Staff
    Customer Support

    Yeah the problem with using the Gutenberg block markup is its not conducive for re-ordering nested elements. Looks like a good alternative 🙂

    #1225744
    Tim

    Ah so if I was creating my own classes it would be simpler ?

    #1225763
    David
    Staff
    Customer Support

    Can be – have a read up on CSS Grid, this will give the basics of how it could achieve that responsiveness:

    Example HTML – notice how all elements are within the same parent container:

    <div class="grid-wrapper">
        <figure><!-- img here--></figure>
        <h2>A Title</h2>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <blockquote>Quote etc</blockquote>
    </div>

    And CSS for CSS Grid:

    /* Desktop 2 colum grid */
    .grid-wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-gap: 20px;
    }
    
    /* Place all elements in column 2 */
    .grid-wrapper>* {
        grid-column: 2;
    }
    
    /* Place image in column 1 */
    .grid-wrapper figure {
        grid-column: 1;
    }
    
    /* Mobile 1 column grid */
    @media (max-width: 768px) {
        .grid-wrapper {
            grid-template-columns: 100%;
        }
    
        /* Move all elemetns in row 1 */
        .grid-wrapper>* {
            grid-column: 1;
        }
    
        /* Move H2 to top Row */
        .grid-wrapper h2 {
            grid-row: -1;
        }
    }
    #1226866
    Tim

    Great.

    Thank you for the example.

    #1227111
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.