How to make a responsive search header with blocks??

  • cuberuler

    (@cuberuler)


    1 year ago

    Hey guys,

    Wow, have I learned a lot in the past few months about WordPress! Pretty amazing thing. You can see in my website, there is a search bar I had to make narrow or else it would mess up to mobile view. And still, there is something where you can wiggle the page on the mobie phone I cant figure out.

    My question is: How can I extend the search bar out nice and long for computers, and make it behave responsively on a mobile phone so it doesn’t screw the page up? I learned on Elementor but this is blocks only, is there a way to make this responsive please?

    Thank you very much.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • joecoyle

    (@joecoyle)

    Hello @cuberuler

    I would be more than happy to assist. I see that you added the search in your header. Was this done through a plugin? When you are editing your header and have the search block selected, there should be some block and style controls to customize the block. I did some testing on my dev site and I found it was best to set the alignment to center and 75% width. I then toggled the view from computer to mobile to confirm it resized nicely.

    Please provide an update if this helped.

    Thread Starter cuberuler

    (@cuberuler)

    Yes, the block seems to be stuck inside a container, so 100% means it’s smaller than I like my Internet bandiwdth. It seems to be stuck in a container but I am going through the navigator on the left hand side and can not seem to find what is containing it, so that 100 PERCENT is 100 percent width.

    The only option to extend it beyond the invisible container is with pixels which therefore responds poorly on mobile.

    Thank you very much for the help, I will be working on it…

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make a responsive search header with blocks??’ is closed to new replies.