[Support request] Home Page same like this website

[Rohith]

1. The content is full width now but I only want the image to be full width. Remaining all should be the same as in the target website.
2. How to add the search icon after the box instead of search text in homepage.

[Ying]

1. You can control each container’s inner container width in each Container block.

2. You should be able to use icon within the search block’s settings.

[Rohith]

1. Okay but Is it possible with any code? Can you please help.
2. Also, I would like to set search bar width to 50 in desktop and 75 in Mobile. How’s that possible?

[Ying]

1. Okay but Is it possible with any code? Can you please help.

You can control the width in each container, you don’t need CSS.
Or are you trying to achieve something else? Let me know!

2. Also, I would like to set search bar width to 50 in desktop and 75 in Mobile. How’s that possible?

You can add the search bar to a Grid block with 1 container, in that case, you can set the search bar to full width, but control the responsiveness within the Grid block.

[Rohith]

1. Actually, I don’t want to disturb other elements. Can we expand the image to full width with the help of css without disturbing others? For instance, if we use a separator then even if we control the width of elements also, it is showing full only. So, can you please help me control the image width with the css?

2. Actually I am looking for some css. I am unable to understand what you are saying.

[Ying]

1. I would not recommend using another way or custom CSS, as this is the correct way to go without causing other issues.

2. We can point you in the right direction, but we can’t offer fully customized solutions for everything. Hope that’s understandable. Here’s the CSS:

@media (max-width: 768px) {
.wp-block-search__inside-wrapper {
    width: 75% !important;
}
}

[Author]

Posts