Responsive Website CSS Wrapping Issue on Header in Mobile

Hello, I have an eCommerce type website that is responsive, but having a display issue in the header in mobile that I would like some help fixing.  When the site is in desktop mode, it shows the search box, search button and shopping cart all on the same row which I prefer. However, when viewing it in a mobile browser, the shopping cart wraps onto a second row and the search box and search button wrap onto a 3rd row while the search box grows in width like this:

This is the way it currently looks in mobile
I would like the have the cart, search box and search button on the same row in mobile with a shorter text box so that the header doesn't get too tall in mobile like this:

This is what I would like it to look like in mobile.
Could anybody tell me what .css I would need to add or modify to fix this? I have attached screen shots of the current look and the desired look. This cart gives me a custom css code section that we can update the css with.  It currently has the following:
header {
background-color: orange;
margin-bottom: 0px;
margin-top: -19px;
margin-left: -20px;
margin-right: -20px;
}
a {
color: #9c9c9c;
}
.row {
padding-top: 10px;
margin-bottom: -10px;
}
#header-basket{
padding-right: 10px;
}
.social-follow {
margin-top: 0px;
}
.input-group-btn{
padding-left: 5px; padding-top: 1px;
}
.input-group{
padding-bottom: 15px; padding-left: 10px; padding-right: 10px;
}

Open in new window


The website is: http://fsb.competitiveedgeproducts.com/

Thank you,
Shawn
smowerAsked:
Who is Participating?
 
smowerConnect With a Mentor Author Commented:
Thank you. This code from an Elancer appears to do the trick:
@media screen and (min-device-width : 219px) and  (max-device-width : 768px),
@media screen (max-width: 749px) and (min-width: 500px) {
#header-basket {
position: absolute;
  top: -9px;
  right: 14px;
 width: auto;
}

#searchformsmall{
margin-right: 116px;
  width: auto;
}

}
0
 
Altin BardhiConnect With a Mentor Software EngineerCommented:
Ok, first of all you need to be updating the code in the media query for the mobile size

Flollow this link if your css is not using media queries http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

While in the media query in your css file you need to float the container of all three child elements: input, search,basket to the left and size the child elements as needed so they all fit on the screen.

You may also send the html code if not sure
0
 
smowerAuthor Commented:
Thank you. So I tried adding the following to the custom css section but it still does not move the cart items on the same row as search even though I shortened the search box and told the container to float.

Here is the custom .css I added.
@media only screen and (min-width: 219px){
.input-group .form-control {
width: 50%;
}
.input-group {
text-align: right;
}
.col-xs-12 {
float: left;
}
}

Can you tell me what I need to change to get it to work?
Thank you,
Shawn
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Altin BardhiSoftware EngineerCommented:
@media only screen and (min-width: 219px and max-width = to the max width of your/users mobile device){

Styles go here,

You are targeting only the min width which may have no effect on the device you are trying to target. To be more specific you can use max-width as well however yo have three child elements that all together need not be more than 99% of it's container / context

So:
.container{
width:100%;	
}
.input-group{
width:50%;
}
.input-group-btn{
width:24%;
}
#header-basket{
width:24%;
}

Open in new window


You can adjust the % values on the child elements to your needs but the % can't exceed 100% or 99% which is the containers width

}
0
 
smowerAuthor Commented:
Thank you again. I am not sure what I am doing wrong, but it is not working for me.  I tried to do it for iphone 6 plus which I believe the min and max is as follows:
@media only screen and (min-width: 414px and max-width: 736px)
I also tried adding your width contents to keep them less than 100% like you recommend, but it seems to make no visible difference on my iphone 6 plus or on my chrome mobile emulator under the development tools.  When you use the chrome or firefox inspectors and tweak those values does it work for you?

Thank you,
Shawn
0
 
Altin BardhiSoftware EngineerCommented:
I think you have media queries conflicts on breakpoint boundaries in your style.css

You can back up the current style.css, delete all media queries and replace with a set of non conflicting ones.

When done then add your styles to each one.
0
 
smowerAuthor Commented:
That code from an Elancer made it work properly.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.