safari vw vh

• Español – América Latina
• Português – Brasil
• Tiếng Việt

The large, small, and dynamic viewport units

New CSS units that account for mobile viewports with dynamic toolbars.

The viewport and its units

To size something as tall as the viewport, you can use the vw and vh units.

• vw = 1% of the width of the viewport size.
• vh = 1% of the height of the viewport size.

Give an element a width of 100vw and a height of 100vh , and it will cover the viewport entirely.

The vw and vh units landed in browsers with these additional units

• vi = 1% of the size of the viewport’s inline axis.
• vb = 1% of the size of the viewport’s block axis.
• vmin = the smaller of vw or vh .
• vmax = the larger of vw or vh .

These units have good browser support.

Browser Support

The need for new viewport units

While the existing units work well on desktop, it’s a different story on mobile devices. There, the viewport size is influenced by the presence or absence of dynamic toolbars. These are user interfaces such as address bars and tab bars.

Although the viewport size can change, the vw and vh sizes do not. As a result, elements sized to be 100vh tall will bleed out of the viewport.

When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport.

To solve this problem, the various states of the viewport have been specified at the CSS Working Group.

• Large viewport : The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.
• Small Viewport : The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

The new viewports also have units assigned to them:

• Units representing the large viewport have the lv prefix. The units are lvw , lvh , lvi , lvb , lvmin , and lvmax .
• Units representing the small viewport have the sv prefix. The units are svw , svh , svi , svb , svmin , and svmax .

The sizes of these viewport-percentage units are fixed (and therefore stable) unless the viewport itself is resized.

In addition to the large and small viewports, there‘s also a dynamic viewport which has dynamic consideration of the UA UI:

• When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
• When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Its accompanied units have the dv prefix: dvw , dvh , dvi , dvb , dvmin , and dvmax . Their sizes are clamped between their lv* and sv* counterparts.

These units ship in Chrome 108, joining Safari and Firefox which already have support.

There‘s a few caveats to know about Viewport Units:

None of the viewport units take the size of scrollbars into account. On systems that have classic scrollbars enabled, an element sized to 100vw will therefore be a little bit too wide. This is as per specification .

The values for the dynamic viewport do not update at 60fps. In all browsers updating is throttled as the UA UI expands or retracts. Some browsers even debounce updating entirely depending on the gesture (a slow scroll versus a swipe) used.

The on-screen keyboard (also known as the virtual keyboard) is not considered part of the UA UI. Therefore it does not affect the size of the viewport units. In Chrome you can opt-in to a behavior where the presence of the virtual keyboard does affect the viewport units .

Additional resources

To learn more about viewports and these units check out this episode of HTTP 203 . In it, Bramus tells Jake all about the various viewports and explains how exactly the sizes of these units are determined.

Additional reading material:

• CSS Values 4 Specification: Viewport-relative lengths
• ChromeStatus Entry
• Layout Viewport explainer
• Viewport Units explainer

Part of the Newly interoperable series

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-11-29 UTC.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Investigating the new CSS viewport-relative units

The CSS Working Group (CSSWG) has recently published an updated working draft of the CSS Values and Units Level 4 specification — a document describing CSS grammar definition and value types.

This update brought a few interesting features, among which are new viewport units. Let’s see what they are and how they work!

Viewport-relative units

We’ll start with a quick revision of the current viewport-relative units.

Viewport-percentage length units, or so-called viewport-relative units, are CSS units relative to the initial containing block, a rectangle where the root ( <html> ) element is located. The block itself is based on the viewport’s size (usually the browser window or iframe), hence the name of the units’ category.

Well-known units

In this category, there are four units you should already be familiar with:

• vw – 1% of the viewport’s width
• vh – 1% of the viewport’s height
• vmin – smaller of vw or vh
• vmax – larger of vw or vh

The above units are available in all modern browsers, with support going back to IE 10 (except for the vmax unit).

You’ll usually see the units in action for page elements such as modals, overlays, and others, powering full-screen experiences .

Other units

Now, apart from the above four units, the new specification actually defines two others: vi and vb . They’ve been a part of Level 4 for quite a while, but still aren’t supported by any well-known browser. Still, they exist, meaning that eventually browsers will support them, so it’s worth knowing how they’re meant to work.

Both units are dependent upon the writing-mode property, making their values bound to the user’s language direction.

• vi – 1% of the viewport’s size in the inline direction
• vb – 1% of the viewport’s size in the block direction

In languages written horizontally, like English, the units are equivalent to vw and vh , respectively. For vertically-written languages, like Japanese, the units are switched, making vi equal to vh and vb to vw .

The problem of browser UI

Before we get to the new units, we first need to understand why they are being introduced.

The problem lies in the User-Agent interface, a.k.a., the browser’s UI.

While browsers usually have access to large screen estate on desktop, the same can’t be said for mobile. That’s why mobile browsers often minimize their UI — like the search bar — to save space when the user scrolls.

This allows for more content to be visible on the screen at one time, but introduces a problem: how should viewport-relative units be implemented?

Historically, the units’ actual values were shifted to adapt to the browser’s current UI state. This proved to be bad for user experience due to content constantly shifting while the user was scrolling.

So, Safari , Chrome (about a year later), and the other browser vendors changed this behavior to make viewport-relative units dependent on the viewport size when the browser’s UI is minimized. This fixed some issues but introduced new ones.

Now, using 100 with any viewport unit meant risking part of the page being hidden by the browser’s UI when it was maximized. This, in turn, led to such practices becoming an anti-pattern on mobile, forcing developers to implement JavaScript workarounds.

That’s where the new units and specification updates step in.

Over 200k developers use LogRocket to create better digital experiences

Viewport-relative unit variants

In truth, the new units aren’t really new. Instead, they’re just variants of the already-existing units we’ve covered above, differentiated by viewport sizing.

Let’s see what that means.

UA-default viewport

The current units starting with v* are now officially known as UA-default viewport-percentage units, and their implementation of viewport size depends on the User-Agent. This means that the behavior of these units can differ between browsers while keeping in mind the current, unofficial, industry standard.

So, to reiterate — nothing new here. The vh , vw , vmin , vmax , vb , and vi units remain as they were in the specs before the change. This ensures backward compatibility.

Large and small viewports

Now, things get interesting when we get into large and small viewport-percentage units. As the name implies, these units put specific requirements on how the UA should size its viewport.

For large viewport units, the viewport must be sized to allow for the largest possible viewport, assuming any dynamic browser UI is retracted. This allows the developer to make their designs fill the entire viewport while keeping in mind that the browser UI could overlap at least part of it.

This large viewport variant starts with lv* and includes lvh , lvw , lvmin , lvmax , lvb , and lvi .

For small viewport units, it’s the exact opposite. In their case, the viewport must be sized assuming any dynamic interface is expanded, determining the smallest possible viewport. This ensures that the developer’s designs fill the entire viewport when the UA interface is expanded, while possibly leaving empty spaces when the UI is retracted.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

This small viewport variant starts with sv* and includes svh , svw , svmin , svmax , svb , and svi .

Dynamic viewport

Lastly, there are also dynamic viewport-percentage units. These will allow developers to use the “historical” behavior where the viewport sizing — and thus units values — depend upon whether the browser interface is expanded or retracted.

While this means more control and choice for developers, this variant comes with a warning.

Using it can cause the content to shift, degrading the UX. Other things to consider are the performance hit and possible animations during recalculations. Those can either improve or further degrade the UX, depending on UA’s implementation.

The dynamic viewport variant starts with dv* and includes dvh , dvw , dvmin , dvmax , dvb , and dvi .

Overall, the new viewport-relative units in the specification mean developers have more precise control over the decisions they make about how their designs should behave in relation to their users’ viewports.

However, with great power comes great responsibility. When the new units eventually arrive in browsers, for developers, it’ll mean not only one more thing to control but also one more thing to keep in mind. While vendors will definitely do their best to implement the units wisely, it’ll now be even more important for developers to ensure and deliver a good user experience than before.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Using AWS Lambda and CloudFront to optimize image handling

Leverage services like AWS Lambda, CloudFront, and S3 to handle images more effectively, optimizing performance and providing a better UX.

Building web-based terminal components with Termino.js

Explore Termino.js, an open source library for integrating web-based terminals into applications, in this introduction article.

How to build a custom GPT: Step-by-step tutorial

Let’s see why and how to build custom GPTs — personalized versions of ChatGPT that act as custom chatbots to serve a specific purpose.

Jest adoption guide: Overview, examples, and alternatives

Jest is feature-rich testing framework that comes with several in-built features that make it powerful and easy to use.

Leave a Reply Cancel reply

New viewport sizes

How svh, lvh and dvh can improve your responsive design, new viewport units.

Up until now, 100vh was the largest height you could get for your CSS styles. The problem with 100vh is that it may actually show more content than is initially available on screen. A practical example you might think of is iOS’ Safari browser.

This now changes, as the standard is enhanced with small, large and dynamic viewport units. I only mentioned the height until now, but all those three size categories also apply for the widt. For simplicity, I’ll use the height throughout this article only.

Small viewport unit (svh, svw)

The small viewport units, identified by sv*, are aligned to the “small viewport”. This unit respects dynamically changing UI-elements from the user agent and essentially allows you to fill the viewport dimension when the the visible document content is its smallest size and the UI-elements are in their largest size.

An example would be Safari’s default UI layout when you load a page. The address bar at the bottom is expanded and takes up quite a lot of space. In this state, the user agent’s UI elements use the maximum of their available space and your page’s visible content is given its minimal visible size.

Large viewport unit (lvh, lvw)

Opposite to the small viewport, the large viewport results in a maximum value that fills the visible page when the UI is in its smallest variant and the page content at its largest. If this specification sounds familiar, it might be due to the fact that the current implementation for “vh” and “vw” acts the same.

A practical example would be Safari’s view when you scroll down a little on any given scrollable page. As you’ll notice, the address bar shrinks, thus leading to the UI’s smallest visible footprint. Your content is given its maximum possible space in this state.

Dynamic viewport unit (dvh, dvw)

You might already have guessed it, the dynamic viewport units can possibly change when the user scrolls. They span at most the large viewport and at least the small viewport. This value can be quite handy if you want to align to the viewport’s height, but always keep your content visible, even if the user scrolls.

A practical example of such a use case would be directly on this PWA. Every “above-the-fold” section for an article keeps the footer aligned to the bottom of the viewport.

Availability

As of writing, these new viewport units are only available from Safari 15.4 and onwards. For Chrome, the feature is behind a feature flag, but not yet stable. Apart from those two browser, no other vendor supports the new units currently.

Suggestions

• can-i-use caniuse.com
• CSS spec w3.org
• Italiano it
• Français fr
• Esperanto eo
• Ελληνικά el
• Afrikaans af

Viewport units: vw, vh, vmin, vmax

Length units representing a percentage of the current viewport dimensions: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

• 4 - 19 : Not supported
• 20 - 25 : Partial support
• 26 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 15 : Partial support
• 16 - 122 : Supported
• 3.1 - 5.1 : Not supported
• 6 : Partial support
• 6.1 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 18 : Not supported
• 19 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 12.1 : Not supported
• 15 - 108 : Supported
• 109 : Supported
• 5.5 - 8 : Not supported
• 9 : Partial support
• 10 : Partial support
• 11 : Partial support

Chrome for Android

Safari on ios.

• 3.2 - 5.1 : Not supported
• 7 : Partial support
• 8 - 17.3 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.3 : Not supported
• 4.4 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

The Large, Small, and Dynamic Viewports

We’ve got viewport units (e.g. vw , vh , vmin , vmax ), and they are mostly pretty great. It’s cool to always have a unit available that is relative to the entire screen. But when you ask people what they want fixed up in CSS, viewport units are always on the list . The problem is that people use them to do things like position important buttons along the bottom of the screen on mobile devices. Do something like that wrong, it might cost you $8 million dollars .

What’s “wrong”? Well, assuming that 100vh is the visible/usable area in the viewport. Whaaaat ? Isn’t that the point of those units? There are tricks like this and this , but that’s why people are unhappy. None of that is intuitive and huge mistakes are all too common. Even though Safari 15 is going to make this a little better , I’d say it’s still not particularly intuitive how you have to handle it.

Bramus Van Damme covers that the spec now includes some new values:

• The “Large Viewport”: lvh  /  lvw  /  lvmin  /  lvmax
• The “Small Viewport”: svh  /  svw  /  svmin  /  svmax
• The “Baby Bear Viewport”
• The “Dynamic Viewport”: dvh  /  dvw  /  dvmin  /  dvmax

It seems to me the dynamic ones are the useful ones, because they will be intuitive: the units that represent the currently usable space, be it large or small.

The Dynamic Viewport is the viewport sized with *dynamic consideration of any UA interfaces*.  It will automatically adjust itself in response to UA interface elements being shown or not: the value will be anything within the limits of  100vh  (maximum) and  100svh  (minimum). Bramus Van Damme , “The Large, Small, and Dynamic Viewports”

Direct Link →

PDX 20-30 Dev Blog

A Team of One Forming and Sharing Best Practices

100% vs 100vw, or: Why Viewport Units Are Not a Panacea

For this hashtag-Throwback-Thursday, I’d like to bring up a time a month or so ago where I ran into a very unusual (and annoying) CSS issue. However, it changed how I designed my sites from now on… and made me a little more skeptical of the vw unit, and viewport units in general.

First: Some History

Viewport units were originally introduced in the September 6th, 2011 working draft of the CSS Values and Units Module Level 3 to allow more precise control over positioning and sizing relative to the browser viewport — the visible area of a user’s screen, not including browser chrome. Originally there were three units defined: vw for 1% of the viewport width, vh for 1% of the viewport height, and vm for the smaller of the two. vm was changed to vmin for the March 8th, 2012 draft , but not before Microsoft adopted the old vm unit for IE9. The vmax unit (for the larger of vw and vh ) was then added in the August 28th, 2012 draft , which is where we’re at today . Microsoft still has yet to implement anything like vmax , though it is on their Edge roadmap as of this writing. 1

Because I love tabular data, here’s when each browser supported viewport units by version number and release date. This can help give us insight into how we got here:

Originally, the viewport units were a bit ambiguous as to whether they should take scrollbars into account — that is to say, there was no explicit mention of scrollbars. From the August 28th, 2012 draft :

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.

In debating what would become the April 4th, 2013 draft , there was a point of contention over whether or not viewport calculations included a vertical scrollbar, should one exist at the root element. The general consensus was that web developers shouldn’t depend upon the presence or absence of a scrollbar when building sites. However, a few respondents were concerned developers would instead rely on tricks like adding right-side padding to offset the scrollbar width in their layouts.

Though their objections were acknowledged,  the viewport entry  explicitly includes the scrollbar width/height depending on its overflow value:

[W]hen the value of ‘overflow’  on the root element is ‘auto’ , any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

When viewport units were first released they were hailed as cool and awesome . Finally, web developers and designers can position DOM elements in the viewport with more consistency, especially for ever-troublesome vertical positioning. They were even more groundbreaking when used as font sizes because unlike every other unit of measurement available, the values aren’t relative to the base font size. Combined with  @media queries, they make responsive and mobile-first design much easier. Combined with flexbox, fixed-pixel grid layouts like 960.gs were obsolete. Turns out you can do some pretty cool stuff with them, but the user is able to control the ensuing layout to a degree.

In short, they gave programmers much more control in some areas of site design while relinquishing control in others, but were still a welcome addition.

Header-ache

Naturally, I made liberal use of them when designing the latest Active 20-30 site, but I soon ran into a problem. I gave my sticky header a width of 100vw that was position: fixed at the top of the page, but any vertical scrollbar that appeared on the page overlapped the header’s right side. Here was the original CSS:

I researched a couple of possible solutions, but I finally found one in a StackOverflow thread that didn’t involve JavaScript or nested containers. I was pretty stupefied at its simplicity: Change width to 100% instead!

Once I did, my problem went away — the right-hand side of my header was no longer covered by the scrollbar! Woo! Also as expected, 100% behaved the same as 100vw on pages that didn’t need a vertical scrollbar.

Calculations and Caveat-ception

The reason this works lies in the spec and how a browser calculates an actual (that is, pixel-unit) value for the element. Sayeth the viewport unit spec :

The viewport-percentage lengths are relative to the size of the initial containing block .

And the percentage unit spec :

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g., the width of a containing block ), or something else.

Viewport units refer to the  initial  containing block, and percentages refer merely to  a containing block. The initial containing block behaves like a root element that surrounds the <html> element, since an <html> element can be styled and sized independently of the viewport and won’t be partially cut off by a vertical scrollbar at its default width. This essentially means that 100vw represents the full width of the containing block  before it was resized to accommodate a scrollbar, and 100% represents its full width  after . Therefore, this caveat  also has a caveat:  It only works at the root level 2 .

This CodePen demonstrates the original problem, its solution, then the solution applied to two other divs to show its limit:

See the Pen 100vw vs. 100% by Jonathan Ledbetter ( @jledbetterpdx ) on CodePen .0

Other Solutions

The original viewport-scrollbar debate implied that setting the html element to have an overflow-y of "scroll" will make 100vw = 100% on the root element, scrollbar or no:

Unfortunately, this has the added effect of always having a right-hand scrollbar, which can look uuuuugly depending on the layout. Definitely not ideal for our situation. Single page apps, however, can adapt this method by changing overflow-y  to "hidden" instead.

The above method is simply to avoid the scrollbar affecting the calculations altogether. To actually  find the width of the scrollbar, you’d need to use this in CSS 3 :

or in JavaScript ( $element = any scrollable element):

However, if you’re looking for a challenge, there are other, more convoluted methods by which to calculate scroll bar width.

In Conclusion

Viewport units are great. I still use them in my code. But from now on, I look to avoid situations where a scrollbar can ruin a good layout by using percents a little more frequently than before. So far, I’ve found changes to the 20-30 site design that involve width or positioning are a bit easier to implement consistently using this method. I think I’ll stick with it until some other new hotness comes along.

Further Reading

• Sitepoint Forums, “100vw and scrollbars”
• I’ve also seen mention of two other viewport units, vi and vb , for 1% of the viewport unit in the direction of the root element’s inline and block axes respectively. Bugs were filed at Mozilla , Chrome and WebKit for inclusion. Alas, support was postponed until CSS Values and Units Level 4 .
• or in situations where the width of the containing block equals that of the root level
• again, root level or equivalent only

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

75 years for us. That's a big deal for you.

We're celebrating. now you can too..

2024 Atlas Models 1.9% APR* for 60 months For well-qualified customers . OR $3,000** Customer Bonus

Offer ends 04/30/2024

2024 Atlas Cross Sport Models 1.9% APR* for 60 months For well-qualified customers . OR $3,000** Customer Bonus

The 2024 Tiguan The versatile SUV

The 2024 Atlas The sophisticated family SUV

The 2024 Atlas Cross Sport The stylish SUV

The 2024 Taos The lifestyle SUV

The 2024 Jetta The compact sedan

The start of something big.

75 years ago, the first Beetle arrived in New York City. At first, people thought we looked sort of funny. But then, something extraordinary happened. They began to fall in love. Relive history with our big game spot (in case you missed it) and celebrate with us all year as we honor our past by looking ahead toward the future of VW.

Lower maintenance . Smarter choice.

Great news: the 2023 Volkswagen Atlas , Atlas Cross Sport, Tiguan, Taos and ID.4 EV cost less to maintain than their respective Toyota, Honda, and Subaru competitors. ⁠ 1 It’s not only a smart choice for your lifestyle; it could also be a smart choice for your wallet. Check out how the other Volkswagen models stack up.

The future of electric is here.

Assembled locally in Chattanooga , TN the 2023 Volkswagen ID.4 SUV is truly something to behold. With a striking, aerodynamic road presence and a spacious, comfortable interior, it'll transform how you think about electric cars. Best of all, it comes loaded with value. Oh, and qualifying individuals may be eligible for up to a $7,500 federal tax credit on select ID.4 vehicles ⁠ 2 .⁠ Ask your dealer about using the credit as a down payment ⁠ 3 .

Owner Information

My ID.4 Reservation

TDI Emissions

Fit more on your VW.

Then try something  on for yourself

VW Certified Techs at your service

College Grad Bonus

Have diploma, will travel.

Military & First Responder Bonus

For those who serve…  And love to drive.

The myVW app: driving a new ownership experience

How Chattanooga Promotes Sustainable Assembly

#DriveBigger: The Tiny-home Movement

Moscow Tours & Travel Packages 2024/2025

Our 63 most popular moscow trips. compare tour itineraries from 45 tour companies. 308 reviews. 4.7/5 avg rating., popular moscow tours.

St Petersburg & Moscow in Style - Winter

• Explore the majestic St Petersburg & Moscow on private city tours
• Admire the rich Russian history, art and architecture
• Travel to Moscow on a highspeed train
• Enjoy the local cuisine in stylish restaurants

Golden Ring of Russia

Lower Volga Voyage

• Visit magnificent Red Square and Kremlin and examine the collection at theKremlin’s State Armory.
• Experience Russia’s diverse musical traditions at lively folk music performances
• Explore Volgograd, the site of the decisive battle of World War II’s eastern front

Best of Russia

Volga Dream Russian River Cruise

Highlights of Russia

St Petersburg & Moscow in Style - Summer

White Russian - 7 days

• Discover Moscow's UNESCO-listed Red Square, home to spectacular St Basil’s Cathedral, Lenin's Mausoleum and the historic GUM Department store
• Explore the grounds of Moscow's mighty Kremlin, with its numerous governmentbuildings, gold-domed cathedrals and the giant tsar bell
• Celebrate New Year's Eve in Moscow!
• Take in the highlights of St Petersburg including a guided tour of the exquisite Church on Spilled Blood, Peter & Paul Fortress and Cathedral
• Take a guided tour of the remarkable Hermitage Museum at the Winter Palace

All Moscow , expedition cruises, self guided adventures and vacation packages. Find the best guided and expert planned vacation and holiday packages. Read more about Moscow

Small Group Moscow Tours

Vodka Shot - 6 days

• Explore the beautiful city of St Petersburg, including the exquisite Church on Spilled Blood, Peter & Paul Fortress and Nevsky Prospekt
• Marvel at the dazzling array of art and exhibits in the world-famous Hermitage Museum, at the Winter Palace in St Petersburg
• Discover a lavish residence of the tsars on a day trip to Catherine Palace at Tsarkoe Selo (winter: mid-October to April) or Peterhof Palace and gardens (summer: May to mid-October)
• Take in the highlights of the capital on a walking tour, visiting Moscow's famous Red Square, home to the historic GUM Department Store, Lenin’s Mausoleum and spectacular St Basil’s Cathedral
• Take a guided tour of the Moscow Kremlin, Russia’s political power house. Stroll around the grounds of this fortified complex, visit the Kremlin's cathedrals and see the mighty Tsar Bell

Route of the Romanovs - 10 days

• Learn about the last days of the Romanovs in Yekaterinburg, visiting the sites where Tsar Nicolas II and his family were assassinated and buried
• Straddle two continents at the famous obelisk Europe/Asia border marker in Yekaterinburg
• Experience the Trans-Siberian railway on an overnight train journey from Moscow to Yekaterinburg

New Year's in Moscow - 9 days

• Visit Catherine Palace at Tsarkoe Selo on Christmas Day and marvel at the incredible Amber Room
• Spend a night in Novgorod, an ancient city by the Volkhov River - explore the kremlin, cathedral and other sights and enjoy a traditional Russian banya (sauna)

Back in the USSR - 7 days

Russian Revolution - 9 days

• Visit historic Novgorod, an ancient city which straddles the Volkhov River. Explore the attractive riverside kremlin and experience a traditional Russian banya (sauna)

The Snowball - 6 days

• Visit Catherine Palace at Tsarkoe Selo and marvel at the incredible Amber Room

Mood for Moscow - 4 days

• Head underground to visit a Stalinist-era Soviet Bunker on an optional excursion
• Stroll to the vibrant Izmailovo Market, which lies behind the walls of an ancient Kremlin, and shop for an array of souvenirs

Best Moscow Tours by Duration

Tours, Cruises & Private Trips

Best Moscow Tours by Price

Top Moscow Attractions & Experiences

Moscow Tours & Travel Guide

Moscow Attractions & Landmarks Guide

Moscow reviews & ratings, capitals of the north.

some hotels could have been better

It was jam packed with every place I wanted to go and see. I especially love my photo of us setting out on the night time river cruise in St Petersburg and the Peter...

I really did not buy much and what I did buy was small gifts for others .

Johanna-Marie

Good hotels, some better than others. Interesting itinerary

Too rushed. Optional tour rather too short

See all Moscow reviews

Moscow Tours FAQ

1. Does Travelstride have all the tour operators?

2. How does the Member Savings program save me money?

3. Can I trust the tour operator and trip reviews on Travelstride?

4. What does ‘Stride Preferred’ mean?