Jump to content

Default theme does not work for mobile device


Recommended Posts

I have modified a bit of the default theme. Now it looks close to what I want to have. It works well on desktop ( mac, haven't test on windows yet) and iPad. Checking the site with iPhone and Samsung Note both somehow look out of places.

 

www.cookcase.com

 

I squeeze quite a few thing into the nav bar, don't know if that's the cause. Please, anyone have an idea what is going on? and how should I fix this?

Link to comment
Share on other sites

The search box should be in line with other stuff in nav bar. Do I need to reduce the width to fit it with the rest? At the bottom of the magnifier also sticking out, which part I need to modify?

 

The blocktop housing the categories also looks too narrow to accommodate everything in one line. What can I do to put everything in the same line?

 

 

post-784947-0-33369100-1419178192_thumb.png

Link to comment
Share on other sites

for the blocksearch, I can't find

 

@media (max-width: 479px) {
.btn.button-search { padding: 10px 0 5px 0; }

 

this is my blocksearch code:

 

#search_block_top {
  padding-top: 0px; }
  #search_block_top #searchbox {
    float: left;
    width: 100%; }
  #search_block_top .btn.button-search {
    background: #848482;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    color: white;
    width: 40px;
    text-align: center;
    padding: 10px 0 11px 0; }
    #search_block_top .btn.button-search span {
      display: none; }
    #search_block_top .btn.button-search:before {
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      font-size: 17px;
      width: 100%;
      text-align: center; }
    #search_block_top .btn.button-search:hover {
      color: #6f6f6f; }
  #search_block_top #search_query_top {
    display: inline;
    padding: 0 13px;
    height: 33px;
    line-height: 45px;
    background: #fbfbfb;
    margin-right: 1px;
    margin-top: 6px; }

.ac_results {
  background: white;
  border: 1px solid #d6d4d4;
  width: 271px;
  margin-top: -1px; }
  .ac_results li {
    padding: 0 10px;
    font-weight: normal;
    color: #686666;
    font-size: 13px;
    line-height: 22px; }
    .ac_results li.ac_odd {
      background: white; }
    .ac_results li:hover, .ac_results li.ac_over {
      background: #fbfbfb; }

form#searchbox {
  position: relative; }
  form#searchbox label {
    color: #333333; }
  form#searchbox input#search_query_block {
    margin-right: 0px;
    max-width: 180px;
    margin-bottom: 0px;
    display: inline-block;
    float: left; }
  form#searchbox .button.button-small {
    float: left; }
    form#searchbox .button.button-small i {
      margin-right: 0; }
 

Link to comment
Share on other sites

I did what you suggested in global.css. From my samsung note 10 which is more or less same size as iPad mini, it still looks like my previous attachment. The search box is not lined up with the contact us-sign in-currency-language button.  For the iPhone, need to wait tomorrow to borrow from my brother see how it works.

Link to comment
Share on other sites

Tested on iPhone, the following issues are found:

1) Imageslider don't show up at all.

2) The product picture all marked with "?"

3) When click "+" at categories, nothing happens.

4) search box doesn't work.

 

I haven't tested on how the order process works yet. Just don't want to overwhelm myself with too many problems at once. If anyone could help me looking at my site on iPhone and let me know what went wrong, I will be really grateful. Merry Christmas!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...