---
title: General Styling
description: Before you continue adding more content and create different layouts it's important to check how your website looks on all devices and different screen sizes. This part is known under the popular term
---
[Skip to content](https://support.sitemanager.io/en/design/responsive/general-styling#main-content)
[](https://support.sitemanager.io/en?hsLang=en)
Open main navigation
Close main navigation
- [Go to sitemanager.io](https://www.sitemanager.io/)
[Go to sitemanager.io](https://www.sitemanager.io/)
How can we help?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://support.sitemanager.io/en?hsLang=en)
2. [Design](https://support.sitemanager.io/en/design?hsLang=en)
3. [Responsive](https://support.sitemanager.io/en/design?hsLang=en#responsive)
# General Styling
Before you continue adding more content and create different layouts it's important to check how your website looks on all devices and **different screen sizes**. This part is known under the popular term **responsive web design**.
We are going to check the general style, the [layout design elements](https://knowledge.sitemanager.io/getting-started-workflow-guideline/7-check-responsive/design-layout-elements?hsLang=en) and the [page content components](https://knowledge.sitemanager.io/sitemanager-developer/introduction/page-components?hsLang=en).
First we start with the general style of our website.
### Design editor
Go to the design start page and click the **edit button** of the content layout.
The design editor will open with the **placeholder render**. In the content section we see the **general style elements**. We click the green paintbrush style button.
*In this example we will check the bottom margin of the tile element.*
### Large Desktop view
Every style property will have **4 viewports (mobile, tablet, laptop, large desktop)**. The style property will open with the **standard laptop** icon selected.
The preview screen starts with the view for **large desktop screens** (when viewed on a large desktop screen min-size 1920x1080).
Clicking on the **desktop icon** will open the properties for this viewport. Click the green save button to update properties for this screen size.
To go to the **tablet view** click the tablet icon on the top right of the render screen.
### Tablet view
Click the tablet icon in the style panel to open the **tablet properties**. Making changes here will only affect when the site is shown in **tablet portrait** mode.
To go to the **laptop view** we will switch the view of the tablet to landscape mode.
### Laptop view (standard)
The style properties standard view is this viewport: it fits for **landscape tablet** and laptops alike.
Click the green save icon when you are done making changes before going to different viewports.
To go to **mobile view** we click the smartphone icon on the top right of the preview screen.
### Mobile view
This is a very **important** view because mostly content **will look very different** (stacked) then on the other devices.
Click the **mobile icon** in the style panel to open this view.
*Because the tiles are stacked on mobile we are going to add 30px to the bottom margin so they don't stick to eachother.*
learn more about mobile styling: [http://knowledge.sitemanager.io/sitemanager-design/design-editor/mobile-styling](https://knowledge.sitemanager.io/sitemanager-design/design-editor/mobile-styling?hsLang=en)
- [Getting Started](https://support.sitemanager.io/en/getting-started?hsLang=en)
- [Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/dashboard?hsLang=en#getting-started)
- [Project Dashboard](https://support.sitemanager.io/en/dashboard?hsLang=en#project-dashboard)
- [White Label & Add-ons](https://support.sitemanager.io/en/dashboard?hsLang=en#white-label-add-ons)
- [Go Live](https://support.sitemanager.io/en/dashboard?hsLang=en#go-live)
- [Account](https://support.sitemanager.io/en/account?hsLang=en#main-content)
- [Account Settings](https://support.sitemanager.io/en/account?hsLang=en#account-settings)
- [My Company](https://support.sitemanager.io/en/account?hsLang=en#my-company)
- [Subscription](https://support.sitemanager.io/en/account?hsLang=en#subscription)
- [Project](https://support.sitemanager.io/en/project?hsLang=en#main-content)
- [General](https://support.sitemanager.io/en/project?hsLang=en#general)
- [Upgrade Project](https://support.sitemanager.io/en/project?hsLang=en#upgrade-project)
- [SEO](https://support.sitemanager.io/en/seo?hsLang=en#main-content)
- [Basics](https://support.sitemanager.io/en/seo?hsLang=en#basics)
- [Advanced](https://support.sitemanager.io/en/seo?hsLang=en#advanced)
- [Go Live](https://support.sitemanager.io/en/go-live?hsLang=en#main-content)
- [Prepare Project](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-project)
- [Prepare Domain](https://support.sitemanager.io/en/go-live?hsLang=en#prepare-domain)
- [Going Live](https://support.sitemanager.io/en/go-live?hsLang=en#going-live)
- [Content](https://support.sitemanager.io/en/content?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/content?hsLang=en#getting-started)
- [Page Management](https://support.sitemanager.io/en/content?hsLang=en#page-management)
- [Content Management](https://support.sitemanager.io/en/content?hsLang=en#content-management)
- [Language Management](https://support.sitemanager.io/en/content?hsLang=en#language-management)
- [Image Library](https://support.sitemanager.io/en/content?hsLang=en#image-library)
- [Collaborating on a project](https://support.sitemanager.io/en/content?hsLang=en#collaborating-on-a-project)
- [Page Components](https://support.sitemanager.io/en/page-components?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/page-components?hsLang=en#getting-started)
- [HTML](https://support.sitemanager.io/en/page-components?hsLang=en#html)
- [CSS](https://support.sitemanager.io/en/page-components?hsLang=en#css)
- [JavaScript (JS)](https://support.sitemanager.io/en/page-components?hsLang=en#javascript-js)
- [How To](https://support.sitemanager.io/en/page-components?hsLang=en#how-to)
- [Layout Components](https://support.sitemanager.io/en/layout-components?hsLang=en)
- [No-Code Editor](https://support.sitemanager.io/en/no-code-editor?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/no-code-editor?hsLang=en#getting-started)
- [Properties](https://support.sitemanager.io/en/no-code-editor?hsLang=en#properties)
- [Advanced](https://support.sitemanager.io/en/no-code-editor?hsLang=en#advanced)
- [Design](https://support.sitemanager.io/en/design?hsLang=en#main-content)
- [Overview](https://support.sitemanager.io/en/design?hsLang=en#overview)
- [Design editor](https://support.sitemanager.io/en/design?hsLang=en#design-editor)
- [Design Panels](https://support.sitemanager.io/en/design?hsLang=en#design-panels)
- [Responsive](https://support.sitemanager.io/en/design?hsLang=en#responsive)
- [Fonts](https://support.sitemanager.io/en/design?hsLang=en#fonts)
- [Layouts](https://support.sitemanager.io/en/design?hsLang=en#layouts)
- [Code](https://support.sitemanager.io/en/code?hsLang=en#main-content)
- [Introduction](https://support.sitemanager.io/en/code?hsLang=en#introduction)
- [Token Management](https://support.sitemanager.io/en/code?hsLang=en#token-management)
- [Project Setup](https://support.sitemanager.io/en/code?hsLang=en#project-setup)
- [ToolStack](https://support.sitemanager.io/en/code?hsLang=en#toolstack)
- [Private Library](https://support.sitemanager.io/en/code?hsLang=en#private-library)
- [Dynamic Content](https://support.sitemanager.io/en/dynamic-content?hsLang=en#main-content)
- [Getting started](https://support.sitemanager.io/en/dynamic-content?hsLang=en#getting-started)
- [Basics](https://support.sitemanager.io/en/dynamic-content?hsLang=en#basics)
- [Advanced](https://support.sitemanager.io/en/dynamic-content?hsLang=en#advanced)
- [External Content](https://support.sitemanager.io/en/external-content?hsLang=en#main-content)
- [Getting started](https://support.sitemanager.io/en/external-content?hsLang=en#getting-started)
- [Configuration & implementation](https://support.sitemanager.io/en/external-content?hsLang=en#configuration-implementation)
- [Logic (Smart Content)](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#getting-started)
- [Configuration & Implementation](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#configuration-implementation)
- [Logic](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#logic)
- [AB testing](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#ab-testing)
- [Timed Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#timed-content)
- [Password Protected Content](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#password-protected-content)
- [Smart API](https://support.sitemanager.io/en/logic-smart-content?hsLang=en#smart-api)
- [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/integrations?hsLang=en#getting-started)
- [Integrations](https://support.sitemanager.io/en/integrations?hsLang=en#integrations)
- [Advanced](https://support.sitemanager.io/en/integrations?hsLang=en#advanced)
- [Modules](https://support.sitemanager.io/en/modules?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/modules?hsLang=en#getting-started)
- [Modules](https://support.sitemanager.io/en/modules?hsLang=en#modules)
- [Upgrade Center](https://support.sitemanager.io/en/upgrade-center?hsLang=en#main-content)
- [Components](https://support.sitemanager.io/en/upgrade-center?hsLang=en#components)
- [Forms](https://support.sitemanager.io/en/forms?hsLang=en#main-content)
- [General](https://support.sitemanager.io/en/forms?hsLang=en#general)
- [Captcha](https://support.sitemanager.io/en/forms?hsLang=en#captcha)
- [Form Actions](https://support.sitemanager.io/en/forms?hsLang=en#form-actions)
- [Extending Forms](https://support.sitemanager.io/en/forms?hsLang=en#extending-forms)
- [Email Templates](https://support.sitemanager.io/en/forms?hsLang=en#email-templates)
- [Advanced](https://support.sitemanager.io/en/forms?hsLang=en#advanced)
- [Cookie Settings](https://support.sitemanager.io/en/cookie-settings?hsLang=en#main-content)
- [Getting Started](https://support.sitemanager.io/en/cookie-settings?hsLang=en#getting-started)
- [Configuration](https://support.sitemanager.io/en/cookie-settings?hsLang=en#configuration)
- [API Call](https://support.sitemanager.io/en/api-call?hsLang=en#main-content)
- [Configuration](https://support.sitemanager.io/en/api-call?hsLang=en#configuration)
[](https://support.sitemanager.io/en?hsLang=en)
Copyright © 2026, SiteManager Group