Skip to content

Commit b1a45a8

Browse files
stevestmartinstevestmartin
committed
mobile layout tweaks, ported from feature/Responsive branch
1 parent b2d87a9 commit b1a45a8

File tree

2 files changed

+221
-3
lines changed

2 files changed

+221
-3
lines changed

‎themes/gophercon/layouts/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ <h1>Give a talk and your ticket, flight, and stay are free!</h1>
9999
<section class="contained-gallery">
100100
<div class="container">
101101
<div class="row">
102-
<div class="col-md-5 col-sm-6">
102+
<div class="col-md-5">
103103
<h1>Why attend GopherCon?</h1>
104104

105105
<p class="lead">
@@ -110,9 +110,9 @@ <h1>Why attend GopherCon?</h1>
110110
<a href="/Gophercon2016Prospectus.pdf" class="btn btn-hollow"><i class="icons8-handshake-filled"></i> Sponsor 2016</a>
111111
</div>
112112

113-
<div class="col-md-6 col-sm-6 col-md-offset-1">
113+
<div class="col-md-6 col-md-offset-1">
114114
<div class="embedded-video-holder vju">
115-
<iframe width="600" height="370" src="https://www.youtube.com/embed/616jvCSR0cg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
115+
<iframe width="100%" height="370" src="https://www.youtube.com/embed/616jvCSR0cg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
116116
</div>
117117
</div>
118118
</div>

‎themes/gophercon/static/2016/css/theme-gophercon.css

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2426,3 +2426,221 @@ body .colors .col-xs-2:nth-child(6n+0) {
24262426
float: right;
24272427
font-size: 15px;
24282428
}
2429+
2430+
/* Large Devices, Wide Screens */
2431+
@media only screen and (max-width : 1200px) {
2432+
.hero-slider img.logo {
2433+
}
2434+
}
2435+
2436+
/* Medium Devices, Desktops */
2437+
@media only screen and (max-width : 992px) {
2438+
2439+
/*-- video section --*/
2440+
.embedded-video-holder {
2441+
margin-top: 30px;
2442+
}
2443+
.embedded-video-holder iframe {
2444+
height: 230px;
2445+
}
2446+
2447+
2448+
}
2449+
2450+
/* Small Devices, Tablets */
2451+
@media only screen and (max-width : 768px) {
2452+
2453+
/*-- Hero section --*/
2454+
.hero-slider img.logo {
2455+
display: block;
2456+
margin: 0 auto;
2457+
max-width: 370px;
2458+
text-align: center;
2459+
width: 70%;
2460+
}
2461+
.hero-slider .container {
2462+
top: 50%;
2463+
}
2464+
.video-header .uppercase, .countdown-header .uppercase {
2465+
margin-bottom: 24px;
2466+
margin-top: 24px;
2467+
}
2468+
.hero-slider .slides li {
2469+
height: 650px;
2470+
}
2471+
2472+
/*-- color section --*/
2473+
.block-content {
2474+
margin-bottom: 0;
2475+
}
2476+
.color-block {
2477+
height: 100%;
2478+
width: 50%;
2479+
}
2480+
.block-right {
2481+
background-color: #f9a987;
2482+
right: 0;
2483+
top: 0 !important;
2484+
}
2485+
.color-blocks a {
2486+
float: left;
2487+
width: 50%;
2488+
}
2489+
2490+
/*-- video section --*/
2491+
.embedded-video-holder {
2492+
margin-top: 30px;
2493+
}
2494+
.embedded-video-holder iframe {
2495+
height: 370px;
2496+
}
2497+
2498+
/*-- hotel styles --*/
2499+
.info-box img {
2500+
display: block;
2501+
margin-bottom: 12px;
2502+
max-width: 100%;
2503+
width: 100%;
2504+
}
2505+
.hotel-price {
2506+
float: left;
2507+
width: auto;
2508+
}
2509+
.visitor-info .col-sm-6 {
2510+
float: left;
2511+
width: 50%;
2512+
}
2513+
}
2514+
2515+
/* Extra Small Devices, Phones */
2516+
@media only screen and (max-width : 480px) {
2517+
2518+
/*-- Hero section --*/
2519+
.hero-slider img.logo {
2520+
display: block;
2521+
margin: 0 auto;
2522+
max-width: 70%;
2523+
text-align: center;
2524+
}
2525+
.hero-slider .container {
2526+
top: 50%;
2527+
}
2528+
.video-header .uppercase, .countdown-header .uppercase {
2529+
margin-bottom: 24px;
2530+
margin-top: 24px;
2531+
}
2532+
.hero-slider .slides li {
2533+
height: 500px;
2534+
}
2535+
2536+
/*-- color section --*/
2537+
.block-content {
2538+
display: block;
2539+
margin-bottom: 144px;
2540+
overflow: hidden;
2541+
}
2542+
.color-block {
2543+
height: 50%;
2544+
width: 100%;
2545+
}
2546+
.block-right {
2547+
background-color: #f9a987;
2548+
bottom: 0 !important;
2549+
right: 0;
2550+
top: auto !important;
2551+
}
2552+
.color-blocks a {
2553+
float: none;
2554+
width: 100%;
2555+
}
2556+
2557+
/*-- video section --*/
2558+
.embedded-video-holder {
2559+
margin-top: 30px;
2560+
}
2561+
.embedded-video-holder iframe {
2562+
height: 250px;
2563+
}
2564+
2565+
/*-- hotel styles --*/
2566+
.info-box img {
2567+
display: block;
2568+
margin-bottom: 12px;
2569+
max-width: 100%;
2570+
width: 100%;
2571+
}
2572+
.hotel-price {
2573+
float: left;
2574+
width: auto;
2575+
}
2576+
.visitor-info .col-sm-6 {
2577+
float: none;
2578+
width: 100%;
2579+
}
2580+
}
2581+
2582+
/* Custom, iPhone Retina */
2583+
@media only screen and (max-width : 320px) {
2584+
/*-- Hero section --*/
2585+
.hero-slider img.logo {
2586+
display: block;
2587+
margin: 0 auto;
2588+
max-width: 70%;
2589+
text-align: center;
2590+
}
2591+
.hero-slider .container {
2592+
top: 50%;
2593+
}
2594+
.video-header .uppercase, .countdown-header .uppercase {
2595+
margin-bottom: 24px;
2596+
margin-top: 24px;
2597+
}
2598+
.hero-slider .slides li {
2599+
height: 500px;
2600+
}
2601+
2602+
/*-- color section --*/
2603+
.block-content {
2604+
display: block;
2605+
margin-bottom: 144px;
2606+
overflow: hidden;
2607+
}
2608+
.color-block {
2609+
height: 50%;
2610+
width: 100%;
2611+
}
2612+
.block-right {
2613+
background-color: #f9a987;
2614+
bottom: 0 !important;
2615+
right: 0;
2616+
top: auto !important;
2617+
}
2618+
.color-blocks a {
2619+
float: none;
2620+
width: 100%;
2621+
}
2622+
2623+
/*-- video section --*/
2624+
.embedded-video-holder {
2625+
margin-top: 30px;
2626+
}
2627+
.embedded-video-holder iframe {
2628+
height: 250px;
2629+
}
2630+
2631+
/*-- hotel styles --*/
2632+
.info-box img {
2633+
display: block;
2634+
margin-bottom: 12px;
2635+
max-width: 100%;
2636+
width: 100%;
2637+
}
2638+
.hotel-price {
2639+
float: left;
2640+
width: auto;
2641+
}
2642+
.visitor-info .col-sm-6 {
2643+
float: none;
2644+
width: 100%;
2645+
}
2646+
}

0 commit comments

Comments
 (0)