- This topic has 3 replies, 2 voices, and was last updated 8 years, 1 month ago by
.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Posts
-
There are a number is issues with my mobile site layout. First, the cart and menu icons overlap. Also, I have a search box with a header in the center and it's moved to the left so you can't see the complete title or search bar. I've attached a screenshot.
Try adding this css in your appearance->customize->custom css:@media(max-width:768px){ a#trigger {right: 5px;} div#searchdiv {margin-top:30px;} }Ok that fixes the issue of the cart icon and menu icons but the black box i have in the center of the page is still off to the right like in the picture and not centered, so I can't use the search function that I have on there and you can't see the title or anything. This is the css I have for that section homesearch{text-align:center;color:#FFF;} .homesearch h1{color:#fff;font-size:64px;font-weight:600;} .homesearch h4{color:#fff;font-size:32px;font-weight:600;} .homesearch input#s { background: rgba(255,255,255,0.9); border-radius: 5px; color: #000000; font-size: 24px; text-align: center; border-color: rgba(255,255,255,0.2); } .homesearch form.left{float:none;display:inline-block;} .homesearch .three_fifth .column_content{ background:rgba(0,0,0,0.7); padding:60px 50px; width:840px; margin:auto; } .homesearch .column_content{ display:inline_block; text-align:center; } .homesearch .three_fifth .one_third .column_content{background:none;padding:0;} #searchsubmit{display:none;} .three_fifth { width:100%; float:none; }Try adding the bellow custom css: @media(max-width:768px){ .homesearch .three_fifth .column_content {width: 400px !important;height:auto;} .homesearch .three_fifth .column_content form.left {min-width:400px;} input#s {width:250px !important;margin-left:-80px !important;} } NOTE: You can change the widths according to your requirements.
Viewing 4 posts - 1 through 4 (of 4 total)
- The topic ‘Mobile Layout Issues’ is closed to new replies.