6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

The right column of the upper part of the site is gone when viewed on mobile.

by magiclouie
5 replies
  • WEB DESIGN
    • |
Hi Warriors,

I have been working so hard on this site to make it responsive. I have tested and used quite a number of themes and finally I ended up using the Canvas theme.

I did some tweaks on this site. I had many issues like the slider is not responsive until I have sorted it out. Also, the "slider and the its side right column" part is not centered earlier then I made a css tweak to fix it.

Until I can't find a way to fix this problem. Here's a screenshot, 2013-10-12_1814 - magiclouie2gas's library

Here's the site, Hub And Spoke Marketing |Hub And Spoke Marketing

I edited the index.php to add that part.

Here are the codes:

CSS

Code:
#Wrapperm {     

width: 960px !important;     
margin: 0 auto; } 

#Rightm {     

width: 500px !important;     
    
float: right;      
}
HTML:

Code:
<div id="Wrapperm">
   
  
  <div id="Rightm">
  <div style="padding-left:30px; padding-bottom:10px" id="customers"><font style="font-family:Tahoma, Geneva, sans-serif !important; font-size:16px !important; color:#000">
  <strong style="font-size:22px !important; color:#102750 !important; font-family:Tahoma, Geneva, sans-serif" >How will your customers find you?</strong>
  <div style="padding-top:15px">To maximize your online exposure, you must be where your customers are looking. By properly placing your business in the areas people search most, we help you by increasing traffic and converting those visitors to customers.</div>
        
  <div style="padding-top:10px"><img alt="" src="http://www.hubandspokemarketing.com/wp-content/themes/kaboodle/images/arrow.png" width="17" height="12" />&nbsp;&nbsp;Multiple sources of traffic</div>
  <div style="padding-top:10px"><img alt="" src="http://www.hubandspokemarketing.com/wp-content/themes/kaboodle/images/arrow.png" width="17" height="12" />&nbsp;&nbsp;Be seen where your customers are looking</div>
  <div style="padding-top:10px"><img alt="" src="http://www.hubandspokemarketing.com/wp-content/themes/kaboodle/images/arrow.png" width="17" height="12" />&nbsp;&nbsp;Increase sales revenue through targeted visitors</div>
        
        
  <div align="center" style="padding-top:15px">
    <table width="205" border="0">
      <tr>
        <td width="1273" align="center"></td>
        </tr>
      <tr>
        <td align="center"><div>
          <style type="text/css">
a.rollover {
    display: block;
    width: 363px;
    height: 54.5px;
    background-image: url('http://www.hubandspokemarketing.com/wp-content/uploads/2013/10/Click-Here-crop.png');
}

a.rollover:hover {
    background-position: 0 -54.5px;
}
            </style>
          <a target="_blank" href="http://www.hubandspokemarketing.com" class="rollover"></a>​ </div></td>
        </tr>
      </table>
    </div>
        
        
        
        </font>
  </div>
  </div>
  
  </div>
The part that says "How will your customers find you?" (<div id="Rightm">) is missing on mobile phones.

I know I am not a professional coder and I hope you could help me out.

Cheers,
Louie
#column #mobile #part #site #upper #viewed
  • Profile picture of the author Go4DBest
    Have you tried testing these css codes out, Create 2 column Responsive layout for Mobile Devices
    Signature
    We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
    {{ DiscussionBoard.errors[8600343].message }}
  • Profile picture of the author magiclouie
    Anyone, please.
    {{ DiscussionBoard.errors[8601959].message }}
  • Profile picture of the author magiclouie
    Anyway, it is fixed now.

    #Wrapperm {
    margin: 0 auto;
    max-width: 960px;
    }

    #Rightm {
    float: left;
    max-width: 500px !important;
    }
    {{ DiscussionBoard.errors[8605291].message }}
  • Profile picture of the author vrtechnologies
    This is ashish please check PM
    {{ DiscussionBoard.errors[8605295].message }}
    • Profile picture of the author magiclouie
      Originally Posted by vrtechnologies View Post

      This is ashish please check PM
      Thanks a lot.

      You are the man. You simply rock. Coding is really your thing.
      {{ DiscussionBoard.errors[8605299].message }}

Trending Topics