Which specific CSS stylesheet do LinkedIn, Facebook, and Quora utilize for their websites?

I've been curious about how websites like Linkedin, Facebook, or Quora design their sites. When I view them in responsive mode in my browser, I noticed that the content stays fixed at 1000px or 1100px and doesn't change. However, when I access these sites on my mobile device, everything looks fine. How do they achieve this?

Edit: To make the question more specific, simply open your browser and visit Linkedin, Quora, or Facebook. Toggle responsive mode (in Firefox, press ctrl+shift+m) and slowly decrease the screen size. Below 1000px or 1100px, you'll notice the content remains fixed and doesn't adapt. I understand media queries should make content respond to different screen sizes, as demonstrated by the page you're currently viewing. Test it out in responsive mode and observe how this page adapts compared to the lack of responsiveness below 1000px and 1100px on sites like Linkedin, Facebook, or Quora.

cssresponsive-design

Answer №1

The @media directive is utilized for creating breakpoints in CSS. Here are some examples:

/*--- Illustration 1 ---*/

/* Typically, .box occupies 100% width */
.box {
  width: 100%;
}
/* Nonetheless, on screens wider than 1000px */
@media screen and (min-width: 1000px) {
  /* It shrinks to 50% width */
  .box {
    width: 50%;
  }
}

/*--- Illustration 2 ---*/

/* For screens 200px or less in width */
@media screen and (max-width: 200px) {
  /* Display a special warning */
  .too-small-browser {
    display: block;
  }
}

/*--- Illustration 3 ---*/

/* @media isn't just for responsive design */
@media print {
  /* Conceal .navbar, .ads, and .footer when printing */
  .navbar, .ads, .footer {
    display: none;
  }
}

For more information, visit: https://developer.mozilla.org/docs/Web/CSS/@media

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expandable fluid inline svg that dynamically fills the remaining space alongside text within a flex row

How can I ensure that an inline SVG occupies all available space within a row without specifying its height across different screen sizes? The solution involves setting the SVG to have 100% height with a viewBox, allowing it to adjust accordingly while ma ...

csssvgflexbox

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

htmlcsscss-transitions

CSS rotation causing issues with absolute positioning

In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...

javascripthtmlcss

Issue with ASP.NET C# querying MS Access database

I am experiencing issues with the like query not working. Can someone help me troubleshoot? Below is the code I am using: string Item_Name = txt_search.Text.Trim(); string Conn = ConfigurationManager.ConnectionStrings["AjitConnectionString"].ToString(); ...

javascriptcssasp.netms-access

Getting rid of the hover box feature in a WordPress theme

Having some difficulty removing the hover effect on the WordPress theme I'm using, called Enigma. The hover effect creates a whitebox over the link, and despite trying various methods to remove it, the issue persists. You can view the website at the ...

phphtmlcsswordpress

When JQuery inserts HTML code, the alignment may differ compared to when the HTML code is written

Important: Check out the comments made by Brandson below, as it contains the correct response. I have created a basic form that allows users to enter various languages (such as english, french, spanish, etc) and their respective proficiency levels (simila ...

jqueryhtmlcsstwitter-bootstrap

How to incorporate a phone number input with country code using HTML

Can anyone help me create a phone number input field with a country code included? I've tried a few methods but haven't had much success. Here is the code I've been working with: <div class="form-group "> <input class= ...

javascripthtmlcssasp.net-core

Center the list items vertically within a div by using the class list-inline

Struggling to vertically center the unordered list '.header-top-widget' within a div. Despite trying several methods, I can't seem to get it centered. My attempts so far include: .header-top-widget { display:flex; align-items:center; } ...

htmlcssbootstrap-5

Discrepancy in inner div presentation between Internet Explorer and Chrome

In my coding dilemma, the "outerDIV" contains an "innerDIV", with Chrome displaying the "innerDIV" at 491px while IE shows it as 425px (matching outerDIV). This discrepancy causes issues in viewing child elements within "innerDIV": Chrome shows the first t ...

htmlcssinternet-explorergoogle-chrome

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

Safari iOS does not display any background for Buttons

Encountering an unusual problem with buttons on iOS devices specifically in Safari browser - the background color isn't being applied like it is on Desktop and Android devices. Here are the CSS properties for the button: export const Button = styled.b ...

cssreactjssafarimobile-safari

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, ...

htmlcssbootstrap-4footer

A guide on incorporating dynamic TailwindCSS classes into React component elements

Just beginning to explore TailWindCSS, I am interested in adding conditional styling to a Button element for enabling/disabling it. Is there a way that I can apply specific styles/classes (such as "opacity-50 cursor-not-allowed") to the button based on c ...

cssreactjstailwind-css

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

Trouble with CSS sprites displaying text alongside images

My current CSS code is set up to display images using CSS image sprites as background images. The images are displayed based on the file extension, however, the href/link text is not appearing in line and is splitting into two lines. a[href$='.pdf& ...

htmlcsssprite

What is the best way to incorporate Bootstrap 5 into a content script without causing any conflicts with the existing CSS of the website? (Chrome Extension)

In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files i ...

javascriptcssgoogle-chrome-extensionbootstrap-5

Is there a way to change the button design within the CSS code of Mailchimp's embed feature?

Struggling to customize the button style and positioning in Mailchimp's embed CSS: <!-- Begin Mailchimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/c ...

htmlcsswordpressembedmailchimp

One side of the page has a contrasting background color compared to the other

Is it possible to create a fixed-width layout with different background colors on either side of the page, where the background colors extend infinitely regardless of how far you zoom out? Creating a 9000x10 px image would not achieve this effect as it wou ...

htmlcsscolorsbackgroundtiling

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

javascripthtmlcssreactjsreact-transition-group

Turn off Chrome Autofill feature when placeholders are being used in forms

I am encountering difficulties with Google autofill for fields that have placeholders. Despite attempting various solutions provided at: Disabling Chrome Autofill, none of them seem to work as needed. The challenge is to create a form with different field ...

javascripthtmlcssgoogle-chromeautofill