#1116 Make flocktofedora.org mobile reponsive
Closed 2 years ago by darknao. Opened 2 years ago by d-enow.
d-enow/fedora-websites mobile-responsive  into  main

@@ -73,34 +73,35 @@ 

            <h3>Event Dates</h3>

            <p>Nest will begin the morning of Thursday, August 5. Sessions will continue each day until Saturday, August 7. <!--You should plan to arrive by Wednesday, August 5 and to depart no sooner than Sunday afternoon for the best experience.--></p>

  

-           <table class="calendar">

-               <tr>

-                 <th>Mon</th>

-                 <th>Tue</th>

-                 <th>Wed</th>

-                 <th>Thu</th>

-                 <th>Fri</th>

-                 <th>Sat</th>

-                 <th>Sun</th>

-               </tr>

-               <tr class="flock">

-                 <td></td>

-                 <td></td>

-                 <td></td>

-                 <td class="flock" colspan="3">Nest</td>

-                 <td></td>

-               </tr>

-               <tr>

-                 <td>Aug <span>2</span></td>

-                 <td>Aug <span>3</span></td>

-                 <td>Aug <span>4</span></td>

-                 <td class="flock">Aug <span>5</span></td>

-                 <td class="flock">Aug <span>6</span></td>

-                 <td class="flock">Aug <span>7</span></td>

-                 <td>Aug <span>8</span></td>

-               </tr>

-             </table>

- 

+           <div class="table-responsive">

+             <table class="calendar">

+                 <tr>

+                   <th>Mon</th>

+                   <th>Tue</th>

+                   <th>Wed</th>

+                   <th>Thu</th>

+                   <th>Fri</th>

+                   <th>Sat</th>

+                   <th>Sun</th>

+                 </tr>

+                 <tr class="flock">

+                   <td></td>

+                   <td></td>

+                   <td></td>

+                   <td class="flock" colspan="3">Nest</td>

+                   <td></td>

+                 </tr>

+                 <tr>

+                   <td>Aug <span>2</span></td>

+                   <td>Aug <span>3</span></td>

+                   <td>Aug <span>4</span></td>

+                   <td class="flock">Aug <span>5</span></td>

+                   <td class="flock">Aug <span>6</span></td>

+                   <td class="flock">Aug <span>7</span></td>

+                   <td>Aug <span>8</span></td>

+                 </tr>

+               </table>

+             </div>

  <!--            <ul>

                  <li align="left"><p><b>Day 1, morning:</b> Kickoff. We'll start with a joint session about the state of Fedora in 2018, priorities for the next year, and messaging the Fedora Council would like emphasized. Then, we will have a series of 20-minute presentations from each of the Fedora Editions, as well as from the current Fedora Objectives — IoT, CI, and Modularity.</p></li>

                  <li align="left"><p><b>Day 1, afternoon:</b> New Ideas Talks. These sessions will be preselected presentations. Additionally, presenters should tell us who they need to be in the room to discuss / convince / get involved.</p></li>
@@ -183,7 +184,7 @@ 

      </div>

      </div>

  

-     <div id="register" class="bg-light border non-jumbo text-center">

+     <div id="register" class="border non-jumbo text-center">

        <div class="container">

        <div class="row">

          <div class="col-xs-12 col-md-8 col-md-offset-2">
@@ -196,12 +197,12 @@ 

      </div>

      </div>

  

-     <div id="comms" class="bg-gray-200 non-jumbo light-blue text-center">

+     <div id="comms" class="bg-light non-jumbo light-blue text-center">

        <div class="container">

        <div class="row">

          <div class="col-xs-12 col-md-8 col-md-offset-2">

            <h2 class="text-center py-1">Social</h2>

-             <div class="row">

+             <div class="row text-left">

              <div class="col-xs-12 col-sm-6">

                <h3>Social Media</h3>

                <p>
@@ -263,7 +264,7 @@ 

      </div>

      -->

  

-     <div id="venue" class="bg-light border non-jumbo text-center">

+     <div id="venue" class="bg-gray-200 border non-jumbo text-center">

        <div class="container">

        <div class="row">

          <div class="col-xs-12 col-md-8 col-md-offset-2 text-center">

@@ -72,6 +72,22 @@ 

    margin-top: 4em;

    margin-bottom: 0px;

    }

+ 	

+ @media only screen and (max-width: 600px) {

+   .container {

+     padding: 3em 3em;

+   }

+ 

+   #welcome h1 {

+     font-size: 40px;

+     margin-top: 10px;

+     margin-bottom: 10px;

+   }

+    

+   #welcome h2 {

+     font-size: 30px;

+   }

+ }

  

  .flock-navbar {

      font-family: "Montserrat";
@@ -96,7 +112,7 @@ 

  .nav-pills > li.active > a,

  .nav-pills > li.active > a:hover,

  .nav-pills > li.active  {

-   background-color: #eee; */

+   background-color: #eee;

    color: #1a3c6d;

  }

  
@@ -222,3 +238,8 @@ 

    margin-left: auto;

    margin-right: auto;

  }

+ 

+ #sponsors img {

+   height: auto;

+   width: 50%;

+ } 

\ No newline at end of file

Description

Closes #969.
I adjusted the components that made the content of the screen extend beyond the phone's width.

Metadata Update from @jflory7:
- Pull-request tagged with: flocktofedora.org

2 years ago

rebased onto 70aa2cab81805f830f4950ec7661f56a7db5949f

2 years ago

rebased onto 4691386df531d3b1f109b434ba79a74da9c4bdd4

2 years ago

rebased onto 935bafb1d66cf34f2049d1a7d826fe45e0f9ea5e

2 years ago

Looks good so far, but the text is still a bit narrow in my opinion in mobile view.
Can you fix that without altering the desktop view?

rebased onto 6dfd856

2 years ago

I made the text broader. It should be easier to read now.

LGTM +1
Thanks d-enow!

Yep, the changes are fine, but the PR cannot be merged as is due to conflicts.
Will do it manually.

Pull-Request has been closed by darknao

2 years ago