Archived topic
Image in Header Widget resizing problem
5 replies · Started by Edmund on June 4, 2021
Hi,
I am having trouble with an image I have placed into the Header Widget on my sandbox site
The image is the Trustpilot image/link.
On a desktop it appears fine until you start to decrease the screen size below 950px, then the image starts to shrink, but becomes unreadable. At a certain point - width 769px, the image falls below the site Logo and tagline which appears to coincide with display for mobile and reverts to original size.
I would like the image to drop below the site logo and tagline much sooner, remaining at original size, perhaps at 1000px and less.
Is there a way to achieve this without affecting the mobile / tablet change point.
Thanks
Hi Edmund,
Try this CSS:
.inside-header {
flex-wrap: wrap;
}Let me know :)
Hi Ying,
Thank you for your speedy response.
It sort of works, in that image remains the same size, and then drops below logo and tagline, but it remains right-justified at that point, centering only when it switched to tablet mode at 769px.
I was hoping, if possible, to force just the image to centre at 1000px (as if in tablet mode), but without impacting on the other elements on the page.
I had tried playing with the code in https://generatepress.com/forums/topic/add-custom-text-to-right-side-of-top-logo/ but could not get it to do anything at all as written, let alone with changing the @media (min-width: 769px) to @media (min-width: 1000px)
Thanks
Try add this CSS as well:
@media (min-width: 769px) and (max-width: 1000px) {
.header-widget {
margin-right: auto;
padding-left: 35px;
padding-right: 35px;
}
}Hi Ying,
Brilliant, works just as I would wish. Thank you.
No problem :)
