Button CSS style in a search bar works fine on desktop but not on iPhone

Question

I was following another stack overflow post link to put a search button inside of a search bar using flex-grow property. It works fine on Desktop (both chrome and safari)

It also looks fine in Mobile View of Chrome's developer tool, even mobile view of iPhoneSE:

However, it looks different on iPhone (both chrome and safari) especially the search button.

In addition, on iPhone SE, the search button is not inside of the search box.

Here is my code (html):


    <div class='search'>
    <form class='search-form' method="POST" action="{% url 'search_forum_market' %}">
    {% csrf_token %}

    <input id='search-bar' name="searchterm" type="text">
    <input id='forum-button' type="submit" value="Search" name="_forum">

    </form>
    </div>

Here is my css:

.search {
grid-column: 2;
width: 500px; 
max-width: 100%;
justify-self: center;
}

.search-form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:2px solid grey;
border-radius: 15px 15px 15px 15px; 
width: 100%; 
max-width: 500px; /* added */
margin: 8px 0; /* added */
}

#search-bar {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border: white 1px;
font-size: 16px;
padding: 4px; 
border-radius: 15px 0 0 15px; 
}

#forum-button{
background: gray;
color: black;
font-size: 16px;
border-radius: 0px 10px 10px 0px; 
border: gray solid 1px; 
padding: 2px; 
}

I could not figure out why this is happening. Thanks.

score 1 · Answer 1 · answered Dec 14 '19 at 06:29

To Fix the issues you have all you need to do is to use Media Query to resolve the issues for iPhone and iPad:

for iPad: use

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{/*STYLES GO HERE */ 
.search {/*write css to fix*/} 
.search-form {/* This bit sets up the horizontal layout */}
}

You have to rewrite your CSS codes to fit the screen size.

for iPhone portrait and landscape: Use

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */}

Thanks for the detailed answer. My real problem is the style of button has changed. I edited my question and added two more pictures: one is mobile view of chrome's developer tools and another one from iPhone. — ha-neul, Dec 14 '19 at 17:48

score 1 · Answer 2 · answered Dec 14 '19 at 07:35

1

i think there are some CSS affect on your form css because i try this this css and html it's works fine for all devices

answered Dec 14 '19 at 07:35

mohamed ali

202
2
3

oh really? was the button style the same? Thanks! – ha-neul Dec 14 '19 at 18:11

Button CSS style in a search bar works fine on desktop but not on iPhone

2 Answers2