logo mobile view

2 コメント

  • Karen Snyder
    Community Moderator

    seoj this sounds like it's happening due to the smaller width of mobile screens. You can use CSS media queries to change the width of the elements according to the width of the screen.

    You need to use developer tools to inspect the elements and find out the classes/IDs of the elements. If they don't have a class or ID, you would have to modify header.hbs to assign it.

    For an example of a media query, if the search bar class is search-container and the logo class is logo-container, you could use the following media queries to control the width:

    @media screen and (max-width: 420px) {

        logo-url {
               width: 30%;

           .search-container {
               width: 30%;

    This is just an example, and it all depends on your individual element layout and which screen widths have the problem with the widths.


  • seoj

    Thank you, Karen. This helped me figure out the linked style sheet and I changed the width to 400px looks fine.




Powered by Zendesk