Solved

Responsive Website CSS Wrapping Issue on Header in Mobile

Posted on 2015-01-16
7
254 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
  • 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Paper tearing animation 6 41
Detecting robots? 5 34
targeting between desktop and responsive menu 3 17
Re-position the objects 7 49
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now