Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 20, 2026 at 11:05 pm #1496215
    GWS

    Hi,
    I need guidance on a responsive @media css that will display the logo on the left, burger menu on the right, and then two custom text widgets that are stacked one above the other. Every time I make changes to the css for one device it messes up another that was perfectly fine. Yes, I know that a responsive css will be based on design and not device but I’m struggling. Could you provide some advice? Details in the private content. Thanks.

    March 21, 2026 at 11:50 am #1496218
    Mike

    Hey GWS,
    #text-20 is a search field, it has the class av-mini-hide so it will not show on small mobile devices.
    Try adding this css to show it:

    @media only screen and (max-width: 479px) {
.responsive.av-no-preview #top #wrap_all #text-20 .av-mini-hide {
	display: block;
}
}

    But you should review your css for the widgets as it is too general and places both of them in the same place:

    
@media screen and (max-width: 1024px) {
    #header .widget {
        left: 20%;
        position: absolute;
        top: 50px;
        transform: translate(-20%);
        z-index: 999;
    }
}

    Try making two css rules for each widget so they will not overlap
    #header #text-19.widget
    #header #text-20.widget
    On the other hand I don’t see the point of showing the search field on mobile when the search icon is already showing.
    Instead of in the header it might be better just above the Latest Articles title.

    Best regards,
    Mike

    March 23, 2026 at 6:13 pm #1496264
    GWS

    You guidance has been so helpful. Thank you!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.