Anyone know how to modify this theme so when it is accessed by mobile devices under 800px so the featured image moves to the top right instead of below the two divs on the left?
I have tried clear:both, position:relative, vertical-align:top
it is within a div wrapper that is 47% on both sides (right and left, the image is within the right 47% width div) so I am out of clues as to why at full desktop width it is there while at 800 or less it moves to the bottom.
I have also made the image smaller to scale as the width decreases. i.e. 679px, I have it at 250px width.
I have removed .fit {margin-right:auto; margin-left:auto;} as well and no change. Responsive is ignoring me.
The boxes get unfloated via @media rules on narrower screens. The image comes after the text in the HTML, so once the boxes are unfloated, the content stacks in its natural order. Are you saying you want to keep the columns even on small screens?
I thought the code says for col-450 width: 47.3%;} so they align perfectly left & right.
the other class is grid { float:none;{ so weren’t they already not floated.?
<div class=“grid col-450”>
I wanted it even only on the 600 to 768px screens… tablets and iPads. For phones I will let stack.
Well, you waved a carrot (float property) in front of me to figure it out. OK, so I just floated them in the smaller screens and I seem to have it working now.
