Screen Sizes and Devices

October 31, 2025

Screen Sizes and Devices

Breakpoints (also called screen sizes) are pixel ranges that correspond to the width of different devices, such as desktop, tablet, and mobile. When the width of a device is within a breakpoints predefined pixel range, the layout of the site is adjusted so the content and design is optimized for that device size and orientation. For example, if I am viewing a site on a desktop computer I can view the full site menu, but when I view the site on my mobile device, I see a hamburger menu instead.

Following are the breakpoints offered in the editor:

  • Desktop (1025px-1399px). This is the default breakpoint.
  • Wide desktop (1400px and up). This is only available in flex mode in Classic Editor.
  • Tablet (768px-1024px)
  • Mobile (767px and below). We always recommend checking mobile breakpoint changes on a mobile device, instead of resizing a desktop screen.
  • Mobile landscape (468px-767px). This is only available in flex mode in Classic Editor.

If you make design, layout or content changes to the default desktop breakpoint, the changes are automatically applied to the other breakpoints. If you change content, such as adding a widget, editing text, or adding or deleting a section, the change automatically applies to all other breakpoints, regardless of which breakpoint the change was made on. For example, if you add a widget on the tablet breakpoint, the widget will be added on all other breakpoints as well.


However, if you make changes to the position or size of an element on specific breakpoints, the changes will not apply to other breakpoints. For example, if you change the size of an element on the mobile breakpoint, the change will only apply to the mobile and mobile landscape breakpoints and no other breakpoints.

Overrides Per Screen Size (Flex Mode and Editor 2.0)


Note

This content is relevant for both Flex mode in Classic Editor and Editor 2.0. To identify your current editor version.


There are certain times when you need to override a breakpoint. For example, on the main breakpoint an image is to the right of a paragraph, but on mobile you need the image to be on top and the paragraph below.


The following are changes you can make to an element and override the main breakpoint:

  • Alignment
  • Position
  • Size
  • Spacing

Once you override a breakpoint, you cannot reverse the change by changing the style in the main breakpoint on the same object.

Hide on a Certain Screen Size (Flex Mode and Editor 2.0)


Note

This content is relevant for both Flex mode in Classic Editor and Editor 2.0. To identify your current editor version.


You can hide certain elements on specific breakpoints from the layers panel or from the element’s floating menu. For example, you can hide an image on mobile devices and it will not affect other breakpoints.


Note

If you hide an element that has other nested elements within it, all nested elements will also be hidden on that breakpoint. For example, if you hide a flex column it will also hide the widgets within that flex column.


To hide an element on a specific breakpoint:

  1. Switch to the breakpoint you want to hide the element on by clicking the view in the top navigation.
  2. Click the element you want to hide.
  3. Click the three horizontal dots icon () on the floating menu and select Hide on this breakpoint. Or in the layers panel, click Hide on this breakpoint next to the element.

Hide on a Certain Screen Size (Classic Editor)


Note

This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.) To identify your current editor version.


Almost everything in the editor, with the exception of the header and footer, can be edited on a per-device basis by making the content specific to that device.


To edit content per-device:

  1. Copy the content that you would like to be device-specific. Right-click the widget, click copy, then click paste.
  2. Right-click on one of the widgets, select Hide on device, then select the device where you want the widget to be hidden. For example, setting a button to Hide on Desktop removes the button from the desktop, but displays the button in the tablet and mobile sites.
  3. Click on the original content and select Hide on device, then hide the content on the device(s) on which you do not want to change this content. For example, if you set your copy button to Hide on Desktop, you would set the original button to Hide on Tablet and Hide on Mobile. This way, you will have two different buttons; one showing on your desktop and a different one showing on your tablet and mobile.
  4. If you want the content to be different on all three devices, you can copy it again (so you have a total of three copies of the same content) and have a different button displayed on each device.
  5. You now have two (or three) identical, but different pieces of content, each displayed on a different device. Any further changes made to this content will only affect the device on which it is set to show.


Hidden content may still show in the code of the live site (after publishing/republishing). This is expected and due to the technology used. When you hide a widget, section, or any content in the editor on a specific device, we hide it using CSS Media Queries. What this means is that the HTML (although hidden on the website) still exists within the web page when a viewer looks at the content. This can sometimes cause a problem where an audit tool that scans the website will identify this hidden content, even though you thought that it was removed from the page.

Switch Between Device Views


Responsive websites work on desktop, tablet, and mobile. For this reason, our responsive editor lets you preview the site in each of these views while editing. This lets you check how your site looks on different devices before you publish, ensuring that your customers have a positive experience no matter what device they are using to view the site.


To switch device views, click on one of the device buttons in the top navigation bar:

Orange TV icon, white tablet icon, and white phone icon on a dark background.

The different device views are not separate versions of your site. Deleting an element in one view (for example, mobile), removes that element from the entire site (desktop, tablet, and mobile). Instead of deleting, right-click on the element and select to hide an element on a specific device.


Device previews do not always reflect precisely what you see on an actual device. Features like fonts, size of the device window, user interface and browser behavior can all cause these previews to be inaccurate to various degrees. For the most accurate version of the site, check on a real device.

Edit by Device (Classic Editor)


Note

This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.).


Edits made to one device appear on all devices. For example, when a row is deleted on the tablet view of your site, the row will also be missing on the desktop and mobile views of your site. This is because content can be shared across all devices. However, you may want to differentiate which content appears on which devices. You can use our edit by device features to accomplish this, and serve your visitors content that is appropriate for the device they are accessing your site from.


When making edits to a specific device, it is often necessary to switch views.

Edits That Do Not Affect Other Devices


Many settings will indicate which devices they affect. For instance, a setting may say Change affects desktop and tablet along with an icon that represents the devices.


There are several edits in the editor that can be changed without affecting mobile. These are:

  • Spacing (Margins and padding)
  • Positioning
  • Width
  • Height
  • Site/Page background
  • Font size (it will not affect text that has been edited in mobile before)
  • Changes to the header and footer on tablet view do not affect the desktop and mobile view


Every other edit you make in the each device view will affect other devices.

Widget-Specific Changes



While some widgets work fine across all devices, there are some drastic differences between devices which creates a need for a different set of features or design preferences per device.


Below is a list of widgets with design suggestions and notes for tailoring certain widgets on certain devices.


Background Images

Due to drastic differences in aspect ratios between devices, it's important to take special care with how you design images in your website. For example, a full page background on a row might look great on a desktop device, but horrible on a mobile device. This might be because desktop devices are more suited to larger width images, while mobile is the exact opposite. You can set a different Page background per device in the site theme settings. It's recommended to use a wide background image for desktop, and a narrow one for mobile or tablet.


Slider Widget

As with the background image, the images you selected for the desktop version of the slider widget may not look as great for tablet or desktop. It's recommended to either:

  • Adjust the frame size for the slider to fit on mobile, or
  • Hide the slider on desktop, and create a version specifically for mobile instead.


Images and Icon Widget

The image widget's size is not automatically adjusted in the mobile version. It's important to check your mobile devices where the image widget is used to make necessary adjustments to fit.


Hover Effects on Mobile or Tablet

Compared to desktop devices, tablet and mobile devices do not have a hover effect at all. Any hover layout or option is disabled on tablet/mobile devices.


Maps Widget

The Map widget has device specific options for when it will show as a button or a map.


Contact Form Widget

Contact forms will always appear one input per line on mobile.


vcita Widget

The vcita online scheduling widget has an option to only show a button, on the device of your choosing.

Responsive Tablet (Classic Editor)


Note

This information is specific to the Classic Editor, and not relevant for Editor 2.0 (formerly known as the All-Flex Editor.).


Due to Apple’s release for iPads (iPadOS), iPads display the same view as desktop. However, you can switch to Responsive desktop-tablet layout to ensure all customizations are visible on live sites.


Responsive layout shows the top navigation header on larger desktops and switches automatically to the hamburger menu header when the screen size is 1024px and below. The small screen layout may be customized, if needed.


Note

  • Most sites will automatically have this feature enabled and the toggle noted below will not be available.
  • For sites that this hasn't been toggled on, once toggled on, the option to toggle it off will be removed.
  • The mobile view of a site created in the classic editor, including the header, is determined by the device used, not by the size of a browser window. As a result, resizing your desktop browser to simulate a mobile viewport will not accurately represent how the site or header looks on actual mobile devices. To see the true mobile presentation of the site, including the header, it is best to view them directly on a mobile device.


To use responsive site layouts:

  1. In the side panel, click Theme.
  2. Click Site Layout.
  3. Under Desktop click the Responsive Layout toggle. You have the following options:
  • Select a site layout for above 1024 px.
  • Select a site layout for 1024px and below.


After switching to responsive site layouts, you can switch views in the top navigation to show Large Desktop (above 1024px), Small Desktop/Tablet (1024px and below), and Mobile.

Important Notes about Responsive Tablet


Following is additional information about the responsive tablet:

  • CSS is the same for both Large Desktop and Small Desktop/Tablet breakpoints, and you will not see a Tablet CSS.
  • Transitions are smoother and not based on User Agents.
  • If you have hidden elements on your site, make sure they are visible before turning on Responsive Layout. To fix, turn Responsive Layout off, unhide all hidden elements. Then you can turn Responsive Layout on and re-hide any hidden elements.
  • Personalization no longer shows a tablet device. Selecting desktop also affects tablet views.
  • Note the following tablet customizations automatically display the desktop layout, and there is no need to customize them:
  • Photo gallery layouts
  • Tablet personalization rules
  • Animations
February 20, 2026
VIDEO TRAINING - The Travelgenix RSS link builder lets you display live product feeds to your audience on website pages and within marketing emails.
February 20, 2026
VIDEO TRAINING - This video will help you to create offer boxes for your website
February 19, 2026
This 30-day plan is designed to fit into a busy schedule. We aren't rebuilding the internet here; we are just making sure your travel business is seen and heard in all the right places. Think of this as a "Couch to 5K" for your website. By the end of the month, you’ll have a site that Google recognises and customers trust. Your 30-Day "Get Seen" Calendar Week 1: Setting the Foundations (The "Check-In") Focus: Telling the search engines you are open for business. Day 1: Set up Google Search Console. Submit your sitemap so Google can start "reading" your pages. Day 2: Set up Google Analytics 4. Check that it’s tracking your own visits so you know it's working. Day 3: Claim your Google Business Profile. Fill in every detail—don’t skip the phone number or the bio! Day 4: Upload 5 high-quality travel photos to your Google Business Profile. These are your "shop window" images. Day 5: Review: Look at Search Console. Has Google found any errors? If not, great—you’re officially on the map. Week 2: Solving Problems (The "Scratch the Itch") Focus: Finding out what travellers want and giving it to them. Day 8: Go to AnswerThePublic. Search for your top destination (e.g., "Skiing in France"). Pick the 3 most common questions people ask. Day 9: Write a short, helpful 300-word "Quick Guide" on your site answering one of those questions. Day 10: Use Canva to create a stunning graphic for that guide. Post it on your social media with a link back to your site. Day 11: Answer the second question from your list as a new blog post or "Expert Tip" page. Day 12: Review your Google Business Profile. Has anyone left a review? If so, reply with a friendly "Thank you!" Week 3: Building Buzz (The "Digital Recommendations") Focus: Getting the word out and looking like the expert you are. Day 15: Use Canva to create a "Top 5 Tips" checklist for a specific holiday type you sell. Day 16: Share that checklist on LinkedIn or Facebook. Ask people to tag a friend who needs a holiday. Day 17: Reach out to a local partner (maybe a luggage shop or a local cafe) and ask if they’d share your "Top 5 Tips" link on their page. Day 18: Write your third "Answer" post from your Week 2 research. Day 19: Check Google Analytics. Which of your three posts got the most clicks? This is your "winner"—write more like this! Week 4: Refining & Repeating (The "Consistency Loop") Focus: Checking the data and planning for next month. Day 22: Go back to Google Search Console. See if any new "search terms" have appeared. Are people finding you for things you didn't expect? Day 23: Update your Google Business Profile with a "Weekly Update" post about a current travel trend or a new solution you offer. Day 24: Use Canva to refresh your website’s main banner or "Hero" image. Keep it seasonal! Day 25: Look at Google Analytics. Identify the page where people "drop off" (leave the site). Read through it—is it too technical? Make it simpler and more engaging. Day 26: Plan your next 3 "Answer" topics for next month using AnswerThePublic. The "Golden Rule" for Success Don't try to do this all in one day. 20 minutes a day is far better for your business than a 10-hour sprint once a month. Google loves consistency; it shows them you are a reliable, active solution provider.
February 18, 2026
Building a successful travel website isn’t a "set and forget" project—it’s more like tending a garden. If you water it regularly, it blooms; if you leave it, the weeds take over. Here is your step-by-step guide to using those five essential tools to keep your business growing. 1. Google Search Console: Your Direct Line to Google Purpose: To make sure Google can see your pages and tell you if anything is broken. Step-by-Step: Verify Your Site: Go to Search Console and add your website URL. You’ll need to prove you own it by adding a small bit of code to your site (most website builders have a simple box for this). Submit a Sitemap: This is essentially a "map" of your site that helps Google find every page. Most sites create one automatically at yourwebsite.com/sitemap.xml. Paste that link into the "Sitemaps" section. Check for "Crawl Errors": Once a month, look at the "Indexing" report. If Google says a page can’t be found, it’s like having a broken link in your shop window. Fix it! The Result: You'll see which search terms people are using to find you. Timeline: It takes 1–4 weeks for Google to start showing your data. Ongoing Effort: Check this once a month. As you add new tours or blog posts, check here to ensure Google has "seen" them. 2. Google Analytics 4 (GA4): Your Business X-Ray Purpose: To see where your visitors come from and what they do before they book. Step-by-Step: Set Up a Property: Sign up at Google Analytics. Follow the prompts to create a "Data Stream" for your website. Install the Tag: Copy the "Measurement ID" (it starts with G-) and paste it into your website builder's analytics settings. Watch the "Acquisition" Report: Go to Reports > Acquisition > Traffic acquisition. This tells you if people are coming from Google, Facebook, or clicking links in your emails. The Result: You’ll stop guessing what works. If your Instagram posts aren't bringing visitors, you’ll know. Timeline: Data starts appearing within 24 hours. Ongoing Effort: Review this weekly. Look for which pages people stay on the longest—that’s the content they find most helpful! 3. Google Business Profile: Your Local Megaphone Purpose: To show up on Google Maps and in local search results. Step-by-Step: Claim Your Business: Go to Google Business and search for your company name. If it’s not there, create it. Fill Every Box: Add your phone number, website, and opening hours. Crucial: Add high-quality photos of your tours or your happy team. Verify: Google will usually send a postcard or ask for a quick video to prove you’re real. The Result: You’ll appear when someone nearby searches for "Travel Agent" or "Tour Operator." Timeline: You can show up within days of verification. Ongoing Effort: Post an "Update" (like a mini-blog post) once a week and reply to every single review. Active profiles rank higher! 4. Canva: Your Visual Hook Purpose: To create professional-looking images that stop people from scrolling past your brand. Step-by-Step: Pick a Template: Search Canva for "Travel Instagram" or "Travel Brochure." Customise with Your Photos : Drag and drop your own holiday photos into the template. Use your brand colours so people recognise you. Download and Share: Use the "Share" button to download high-res versions for your site or social media. The Result: Your business looks like a global powerhouse, even if you’re a team of one. Timeline: Instant. You’ll have a professional design in 10 minutes. Ongoing Effort: Use this daily or weekly. Visuals go out of date fast; keep your "shop window" fresh with new, seasonal imagery. 5. AnswerThePublic: Your Content Crystal Ball Purpose: To find out exactly what questions travellers are asking so you can provide the answers. Step-by-Step: Search Your Niche: Go to AnswerThePublic and type in a destination or service, like "Luxury Maldives" or "Walking tours London." Download the Data: It will show you a "wheel" of questions people ask (e.g., "Is the Maldives expensive in May?"). Write the Solution : Pick one of those questions and write a short, helpful article on your website answering it. The Result: You become the "expert" that Google loves to recommend. Timeline: Writing an article takes a few hours; seeing it rank on Google takes 3–6 months. Ongoing Effort: Do this once a month. Search trends change with the seasons (winter sun vs. summer city breaks), so always check what people are curious about now. The Reality Check Digital growth is a marathon, not a sprint. You won't see a flood of bookings overnight, but by using these tools consistently, you are building an "asset" that works for you 24/7.
February 16, 2026
So, you’ve launched your new travel site. It looks fantastic, the imagery is dream-worthy, and you’re ready to send people on the trip of a lifetime. The only problem? It’s a bit quiet. If your website feels like a luxury resort with no guests, don't worry. It’s a common itch for new sites, and we’re going to scratch it. Here is how we get you off the back streets and onto the high street of the internet. Why Is Nobody Seeing My Beautiful Site? (The Itch) The biggest frustration for any travel business is knowing you have the perfect solution for a holidaymaker, but they simply aren't finding you. You're competing with the giants, and Google can sometimes feel like a VIP club where you’re not on the list. The secret isn't "better tech"—it's being helpful. People don't search for "websites," they search for "where is the best place for a quiet half-term break?" or "how do I plan a trek in Peru?" When you start answering those questions, the traffic starts flowing. The Visibility Roadmap: Your 3-Step Plan 1. Talk to the Search Engines Think of Google as a giant filing cabinet. If you haven't told them you exist, they can't file you under "Amazing Travel Expert." You need to "check in" so they know your doors are open. 2. Answer the Questions Travellers Are Asking Instead of just listing prices, tell stories. Write about the "top 5 hidden beaches" or "how to pack for a safari." When you provide the answers, Google rewards you by putting you in front of the people asking. 3. Get Digital Recommendations In the travel world, word of mouth is everything. The digital version is getting other reputable websites to mention yours. It’s like a "thumbs up" that tells search engines you’re a trusted expert. The Traffic Toolkit: How to Drive Visitors Google's Front Page (Organic Search): This is the long game. By regularly adding fresh, helpful advice to your site, you’ll naturally climb the rankings. The "Scroll-Stoppers" (Social Media): Don't just post "Book Now." Post a video of a sunset or a tip on how to skip the queues at the Louvre. Give them a reason to click through to your site. The Local Map: If you have an office or a specific region you cover, appearing on the map is a "quick win" for building trust. Your Travel Tech Stack: Simple Tools for Big Results You don't need to be a coder to use these. They are your eyes and ears on the web.
January 12, 2026
VIDEO TRAINING - This tool helps Travelify choose a better default flight for flight plus accommodation holidays.
November 28, 2025
VIDEO TRAINING - This Guide will walk you through the process of creating a new Role in Travelify.
November 27, 2025
VIDEO TRAINING - This Guide walks you through the process of creating a New User in Travelify
November 26, 2025
VIDEO TRAINING - Learn how to efficiently add a Promotion Code in Travelify
November 25, 2025
VIDEO TRAINING - Learn how to efficiently complete the process of adding a Voucher Code in Travelify
Show More