- This topic has 1 reply, 2 voices, and was last updated 10 years, 2 months ago by
.
-
Posts
-
As it stands the featured image is floated to the left of the content in the Featured Page widget, and when it resizes, the image is above the page content. I'd like to make it below the content on mobile, flush with the bottom of the widget.
How could I accomplish this? Thanks so much!!!
http://community.beaudigital.com/A rule of thumb: first in content first in mobile view unless you use flexbox box model or jquery to reorder things on different viewports. The widget itself puts the image first. I totally think this should be an option.
You can use flexbox and just know that IE8 needs fallback styles. There are lessons all over the place on flexbox. https://nostrongbeliefs.com/flexbox-vertical-ordering/
If you are good with jQuery and CSS you can clone the image after the content and hide the original and then show it again when the size reaches the breakpoint you choose. There may be examples on StackOverlow.
If you're good with php, you can fork the original widget, rename it and the instances (you'll have to learn how to fork something) and then move the image (line 130) below the the title and text (line 212). Then float at the break point and remove the float on the small viewport. There are hooks, so forking may not be necessary.
It's pretty involved.
- The forum ‘General Discussion’ is closed to new topics and replies.