-1

We are pulling code from one of our websites (which has full width content) and attempting to use a similar media query on a different site whose content includes empty sidebars. The main issue is that in mobile views, our page maintains those sidebars and crunches everything into a skinny column. The page has a form on the right with an image to the left, logo above, company logos below, and text below company logos.

Any suggestions on which piece of this I should be messing with to fill the full width in mobile? Also, we are operating these properties within HubSpot's COS.

Here is what we are pulling:

<style>

@media (max-width: 768px) {
.testimonials {margin-top:500px;}
.row-fluid-wrapper.row-depth-3.row-number-3 {background: #FFFFFF;}
}


.inner-form{
margin-left: 68% !important;
max-width: 300px;
margin-top: 20px;
position: relative;
z-index: 2;
}

.outer-form{
height: 345px;
}

.needs-background{
    background: url(http://cdn2.hubspot.net/hub/362750/file-830706138-png/quote_us_medicare/pic.png) no-repeat; padding-bottom:100px;
}
@media(max-width:767px){
  .needs-background{
     background:initial !important;
  }
.inner-form{
margin: 0 auto !important;
height: initial;
margin-top: initial;
}
}
#hs_cos_wrapper_module_1396381482147112 input[type="submit"] {
font-size: 16px !important;
display: inline-block !important;
color: #ffffff !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
padding-right: 35px !important;
margin-left: 2px !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
font-weight: bold !important;
line-height: 30px !important;
border:2px solid;
border-radius:10px;
border-color: #D1D1D1;
}
@media(min-width:768px){
  .small-screen-image{
     display:none !important;
  }
}

</style>
macsauce
  • 11
  • 5
  • Can you provide a link so we can see the HTML? Start from the outside and work your way in. Check any margin, padding and width values use relative values like Ems instead of Px so the browser can calculate the proportions cleanly. Also, why do you have a media query to target only 1px of width (768px)? – Timmah May 22 '14 at 23:14

1 Answers1

0

It's hard to tell without seeing the HTML code. But from what you describe, you could use the mobile media queries to grab the sidebars and set the width to zero and display: none. Then you could set the width of the main form in the same query to fill the width of the screen.

erikr98
  • 76
  • 3
  • That is a link to the rendering of the page as it exists in HubSpot right now. The current setup of the media query was done by their support staff for another property and I'm trying to adapt it to this one. – macsauce May 23 '14 at 14:51
  • Sorry macsauce, HubSpot is a password-protected service. Any other way we can look at it? – erikr98 May 23 '14 at 14:55
  • Trying to figure out which piece of html to paste that'll stay within character limit and be relevant. – macsauce May 23 '14 at 15:11