Solved

Responsive Website CSS Wrapping Issue on Header in Mobile

Posted on 2015-01-16
7
302 Views
Last Modified: 2015-01-24
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
0
Comment
Question by:smower
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 8

Assisted Solution

by:albacom
albacom earned 200 total points
ID: 40554586
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
 

Author Comment

by:smower
ID: 40554650
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
 
LVL 8

Expert Comment

by:albacom
ID: 40554881
@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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:smower
ID: 40555537
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
 
LVL 8

Expert Comment

by:albacom
ID: 40555682
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
 

Accepted Solution

by:
smower earned 0 total points
ID: 40559044
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
 

Author Closing Comment

by:smower
ID: 40567998
That code from an Elancer made it work properly.
0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question