Archived topic
Elements: Change block display order for Mobile
7 replies · Started by Tim on April 3, 2020
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
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
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.
Yeah the problem with using the Gutenberg block markup is its not conducive for re-ordering nested elements. Looks like a good alternative :)
Ah so if I was creating my own classes it would be simpler ?
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;
}
}Great.
Thank you for the example.
You're welcome
