Skip to Main Content
Test
Test
X
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
View All 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!
 Read More...
More Information
More Information
Differences include borders, backgrounds and layouts. Some layouts restrict the maximum width of the container that centers content.
 Read More...
Slick Slider
Slick Slider
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.
 Read More...
Sample Article
Sample Article
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.
 Read More...
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.
 Read More...
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
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
Dec
15
Sunday funday
Ends at 12:00 AM
ESV Test District
Dec
22
Sunday funday
Ends at 12:00 AM
ESV Test District
Dec
29
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
Youtube
Monkeys One Hundred
Facebook
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
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