search

thevenusproject / old_tvp_website

This was the github repo for the old TVP website
1 stars 0 forks source link

Site doesn't display well on tablet #7

Open BorislavZlatanov opened 10 years ago

BorislavZlatanov commented 10 years ago

Here's a screenshot:

stbuyst

JayCarr91 commented 10 years ago

@media (max-width: 480px) { [class="span"], .uneditable-input[class="span"], .row-fluid [class="span"], .row [class="span"] { display: block; float: none; width: 100% !important; margin-left: 0 !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }

JayCarr91 commented 10 years ago

code above fixes phones.

JayCarr91 commented 10 years ago

@media (max-width: 767px) {

[class="span"], .uneditable-input[class="span"], .row-fluid.multi [class="span"], .row-fluid [class="span"], .row-fluid.mobile-in2 [class*="span"] { display: block; float: left; width: 48.717948717948715% !important; margin-left: 2.564102564102564% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; clear:none !important; }

.row-fluid-nomargin .row-fluid [class*="span"] { width: 50% !important;}

.span12, .uneditable-input.span12, .row-fluid.multi .span12, .row-fluid .span12 { width: 100% !important}

[class*="span"]:nth-child(2n+1), 
.uneditable-input[class*="span"]:nth-child(2n+1), 
.row-fluid.multi [class*="span"]:nth-child(2n+1), 
.row-fluid [class*="span"]:nth-child(2n+1),
.row-fluid.mobile-in2 [class*="span"]:nth-child(2n+1),
.row-fluid.mobile-in3 [class*="span"]:nth-child(3n+1) {                 
margin-left: 0 !important;
clear:both !important;
}

.row-fluid.mobile-in2 [class*="span"] {
margin-bottom: 2.564102564102564% !important;       
}
.row-fluid.mobile-in3 [class*="span"],
.row-fluid.mobile-in3 [class*="span"]:nth-child(2n+1) {
width: 31.491712707182323% !important;
margin-left: 2.7624309392265194% !important;
margin-bottom: 2.7624309392265194% !important;
clear: none !important; 
}

.row-fluid [class*="span"]:first-child,
.row-fluid.multi [class*="span"]:first-child,
.row-fluid.mobile-in3 [class*="span"]:first-child {
    margin-left: 0 !important;
}

.row, .row-fluid { margin-bottom: 20px;}
.row:last-child, .row-fluid:last-child { margin-bottom: 0;}

.row-fluid [class*="span"], .products li { margin-bottom: 20px !important; display: block; }

}

JayCarr91 commented 10 years ago

Here is some of my bootstrap fixes.. if you see some classes I have .mobile-in3 or .mobile-in2, which forces the spans to brake down is to 3 columns(.mobile-in3) during mobile view or 2 columns(.mobile-in2).

JayCarr91 commented 10 years ago

in some cases we need to add dedicated classes to the sidebars to break from a span float.

@media (max-width: 979px){ width: 100%; margin-left: 0 !important; float: none; }

BorislavZlatanov commented 10 years ago

Thanks, Je. Can you apply this to the test site so we see how it looks?

FriendlyHacker commented 10 years ago

This has been fixed by hiding the left column on low resolution.