Skip to Main Content

X

Liquid Test District 13

Quick Links

model house on table

building on mars

On Styles A, the Find It Fast buttons on mobile will get borders separating them. This happens starting at 991px wide. On Styles B, the Find It Fast buttons get a darker background color on mobile to separate them. This happens starting at 991px wide. On Styles C, the Find It Fast buttons get a lighter background color on mobile to separate them. They also get a more horizontal layout in each button, with the icon sitting to the left of the text. This happens starting at 991px wide.

Find It Fast

Click Here to Change Mobile Styles!

CTA Link 1

Some Cubes

CTA Button

Button

Sample

Sample Link

At 991px, the news slider goes to 2 slides. At 768px it goes to a single slide. The "Lates News" title aligns to the left at 991px and the news slider goes to 3 slides. At 768px it goes to 2 slides. At 991px the news slider is disabled and it turns into a vertical scrolling area. However its container is also limited to 400px wide to prevent that the photos and articles from being too big.

Latest News

Info About Mobile Styles

Info About Mobile Styles

There are 3 different variations on the mobile styles here. Click the button above to cycle between available styles.

You can also press the 'E' key twice in a row to cycle styles!

More Information

More Information

Differences include borders, backgrounds and layouts. Some layouts restrict the maximum width of the container that centers content.

Slick Slider can change the number of slides displayed at once based on the screen size. Slides can be limited down on smaller screens as space gets tight.

If you have your browser window right below 991px wide, you will be able to see a noticeable difference.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a finibus tortor, at ullamcorper nibh. Sed sit amet purus elementum, semper tellus laoreet, varius nibh.

Example Headline

Example Headline

Sample subheader text lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a finibus tortor, at ullamcorper nibh. Sed sit amet purus elementum, semper tellus laoreet, varius nibh.

At 991px there are 3 event slides, and at 768px it goes down to 1 slide. At 991px there are 4 event slides, and at 768px it goes down to 2 slides. The Upcoming Events title also is aligned left for a bit below 991px. At 991px the event slider is disabled and it turns into a vertical scrolling area. However its container is also limited to 400px wide to prevent that the content from being too big.

Upcoming Events

View All Events

Oct
20

Sunday funday
Ends at 12:00 AM
ESV Test District

Oct
27

Sunday funday
Ends at 12:00 AM
ESV Test District

Nov
03

Sunday funday
Ends at 12:00 AM
ESV Test District

Nov
10

Sunday funday
Ends at 12:00 AM
ESV Test District

Nov
17

Sunday funday
Ends at 12:00 AM
ESV Test District

Nov
24

Sunday funday
Ends at 12:00 AM
ESV Test District

Dec
01

Sunday funday
Ends at 12:00 AM
ESV Test District

Dec
08

Sunday funday
Ends at 12:00 AM
ESV Test District

The Fast Facts stay side-by-side until 576px, where they drop down to a vertical list. The Fast Facts title gets left-aligned below 991px for a bit. The fact items stay side-by-side until 991px and then there are two per line. At 991px the fact items line up in a vertical list that can be scrolled through, saving space.

Fast Facts

Click Here to Change Mobile Styles!

100% Duis aute irure dolor in repre cillum dolore eu fugiat nulla pariatu

800+ Duis aute irure dolor in repre cillum dolore eu fugiat nulla pariatu

1:1 Duis aute irure dolor in repre cillum dolore eu fugiat nulla pariatu

50+ Duis aute irure dolor in repre cillum dolore eu fugiat nulla pariatu

The social media area goes from 66% width to 100% at 991px. At 768px the social media feeds stop being side-by-side, and the one to the right moves under the one that was on the left. This style is similar to the previous version, but the borders around the social media feeds are hidden. This is helpful sometimes because Facebook has a max width and it might look weird with empty space. This style keeps the social and spotlight areas next to each other up until 768px. At 768px when the social media goes to 100% width, the feeds get a light gray background behind them. Just a random idea but it could look with Facebook when FB decides to cap out at its max width.

Skip Social Media

Monkeys One Hundred

Monkeys One Hundred

At 991px the Spotlight area goes to 100% width and goes below the social media area. The spotlight content is a hard-coded Text Window component, so we are very limited in what we can do with CSS. The spotlight main title, the photo and all the text is aligned left. Since this is content that the client manages through, we can't fully control this, and the client might override whatever we put on here. At 991px the Spotlight stays side-by-side with the social media until 768px, where it drops below and goes to 100% width. The spotlight text tries to get centered, since the client manages this content though they might override the CSS.

Spotlight

Spotlight Title
staff member photo

staff member photo

Name: Example Name

Year: 2021

Favorite Subject: Science

This is sample content loaded from a Text Window Component that the client can freely edit. They can place whatever text they like in here. When they use the Embedded Image feature to add an image in the component, it will be placed to the right if they select "Right Align" or placed to the left if they select "Left Align". Because this is dynamic content and users can add whatever they like here, we do not have as much control over how the content is displayed on different screen sizes.

© 2024. Design Samples. All Rights Reserved.

View text-based website

School CMS Created by LINQ