Home › Forums › Pro Support › One column in tablet
Tagged: responsive
- This topic has 6 replies, 2 voices, and was last updated 2 years, 8 months ago by
David Beckwith.
-
AuthorPosts
-
December 29, 2020 at 6:35 am #24727
Ricardo
ParticipantHi,
In this page:
https://wordpress-89823-1605306.cloudwaysapps.com/
I’m displaying 3 columns.
In tablet it’s displaying 3 columns also. In mobile only 1 (full container width).
Is it possible to have 1 column full container width in tablet also?
How can I achieve that?
Thanks,
RicardoDecember 29, 2020 at 8:04 am #24738David Beckwith
ParticipantHi there,
try adding this CSS:
@media (max-width: 1024px) { .wp-show-posts-columns, .wp-show-posts-inner { margin-left: 0 !important; margin-right:0 !important } .wp-show-posts-columns .wp-show-posts-single { display: block; width:100% } .wp-show-posts-image.wpsp-image-left, .wp-show-posts-image.wpsp-image-right { float: none; margin-right: 0; margin-left:0; } .wp-show-posts-image img, .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img{ width: 100%; max-width: unset; object-fit: unset; } }
Change the 1024px in this line:
@media (max-width: 1024px)
to adjust when you want it to display 100% columnsDecember 29, 2020 at 11:30 am #24746Ricardo
ParticipantHi,
Thank you very much for your reply.
It worked, but since I have set the images to be 450×450, it doesn’t deliver a nice result on tablet.
If it’s not an abuse, if that is possible, could you help me understanding how to adjust the image height and width for tablet with some css?
Best regards,
Ricardo PonsDecember 29, 2020 at 11:38 am #24749Ricardo
ParticipantP.S: I just need to adjust image height, not width.
Thank you
December 30, 2020 at 10:47 am #24778David Beckwith
ParticipantTry changing this:
.wp-show-posts-image img, .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img { width: 100%; max-width: unset; object-fit: unset; }
TO:
.wp-show-posts-image img, .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img { width: 100%; max-height: 450px; max-width: unset; object-fit: cover; }
December 30, 2020 at 12:01 pm #24781Ricardo
ParticipantThank you!
This css does the trick, but the images are losing a lot of quality (like it was stretched). Is there anyway to avoid this?
Best regards,
RicardoDecember 30, 2020 at 4:28 pm #24791David Beckwith
ParticipantUnfortunately not as they are being ‘stretched’ apart from uploading a much large image to begin with which could be detrimental to performance – you could minimize that happening by changing the @media query from
1024px
to a smaller value eg.769px
then the stacking would only occur on the smaller tablet devices. -
AuthorPosts
- You must be logged in to reply to this topic.