max width safari not working

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

width: max-content;

Posted on Jul 5, 2021 12:28 AM

Similar questions

• Larger text in Google while using Safari Hi, My Safari has changed the text size in Google suddenly and I’m unsure on how to change this. I have included a screenshot as a reference and, the text appears to be enlarged above links and in the description areas, however text like YouTube description remains the same. I have tried toggling a few settings in the Settings app related to Safari, and cleared all the cookies and cache, still nothing. Can I please have some assistance with this ? Thanks, 231 3
• Overlapping of words While browsing through Safari, I use to get a few words overlapped. What is the reason and how to rectify. Thanks 1630 5
• Text disappears in address bar Hello! When typing a url in the browser bar on Safari, the text disappears within a few seconds. Even when I am not finished typing the address. I have read that the culprit could be extensions in Safari. I do not have any Extensions. Any other ideas? 3319 2

Loading page content

Page content loaded

Jul 5, 2021 7:00 AM in response to e6voe9

Please submit a report to Apple.

https://developer.apple.com/bug-reporting/

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width .

max-width overrides width , but min-width overrides max-width .

Defines the max-width as an absolute value.

Defines the max-width as a percentage of the containing block's width.

No limit on the size of the box.

The intrinsic preferred max-width .

The intrinsic minimum max-width .

Use the available space, but not more than max-content , i.e. min(max-content, max(min-content, stretch)) .

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)) .

Limits the maximum width of the element's margin box to the width of its containing block . It attempts to make the margin box fill the available space in the containing block, so in a way behaving similar to 100% but applying the resulting size to the margin box rather than the box determined by box-sizing .

Note: To check aliases used by browsers for the stretch value and its implementation status, see the Browser compatibility section.

Accessibility

Ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Formal definition

Formal syntax, setting max width in pixels.

In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• The box model , box-sizing
• width , min-width
• The mapped logical properties: max-inline-size , max-block-size

This page requires JavaScript.

Please turn on JavaScript in your browser and refresh the page to view its content.

[Fixed] @media query in CSS not working issue

CSS media queries are an incredibly useful tool for targeting specific devices, resolutions, and other factors. We will go over steps to fix media query issues

🔔 Table of contents

CSS media queries are an incredibly useful tool for targeting specific devices, resolutions, and other factors when creating a website.

This is good for overall responsive design.

However, when they don’t work, it can be incredibly frustrating.

Steps to fix CSS media queries issues include the following:

1.Check your media query syntax

The most common cause of media queries not working is incorrect syntax. Make sure that you’ve got all the correct characters in the correct order. It’s also important to make sure that you’re using the correct syntax for the version of CSS you’re using.

2. Check to see if you are using the right break points It’s also important to make sure that we are using the right break points (and orientation) for the devices we want to test. For example, mobile phones such as iPhones will have lower breakpoints.

3. Make Sure the Media Queries Are in the Correct Order

The order of your media queries is also important. Generally speaking, you want to put the most specific media query first and the most general one last in your CSS file.

4. Check for Conflicting Styles - Check you dont have conflicting breakpoints or not logical operators

5. Are you using the HTML viewport meta tag? eg <meta name="viewport" content="width=device-width, initial-scale=1" />

Check your media query syntax

CSS media query follows the syntax of having starting with the @media at-rule and then followed by media type (screen, print, all) and a bunch of media features :

So in the above example, we can see that the media type is screen and the media features are min-width: 30em and orientation:landscape . Just means that the CSS that this media query is targeting should be for screens and the devices with min-width of 30em and orientation mode.

Some common mistakes with syntax when using media queries:

• Spelling mistakes - since its a fair chunk of code to type out, check that you have the right spelling. Tools like VSCode can help with this.
• Using commas means different things. Take the following example:

The above means that we are declaring two different media queries. If we want to target min-width of 600px and max-width of 601px, we should re-write it as follows:

Check to see if you are using the right break points

Our website can be accessed on a wide range of devices (tablets, phones, desktop), having break points we can define specifically how our website looks on each.

When doing responsive first design (design for mobile first and then move up), it is prefered to follow the below set of breakpoints as a general rule.

Check out the following table for breakpoints for specific devices and their orientation

(Note: the values are in pixels)

Make Sure the Media Queries Are in the Correct Order

Make sure that the standard CSS declarations are above the @media query definition. Take the following example:

If we have the .test class below our @media query, then it will not apply the font-size:180px property.

Check for Conflicting Styles

Media queries allows you to build up logical operators (using things like and and not ). This can lead to confusion and conflicts within your styles.

An example is specifying conflicting widths:

As another example, when using the not logical operator, it will apply to the whole media query and not individual attributes. Lets say we want to target all media types (screen, print, et) and only for monochrome browsers:

Now if we add a not operator, it will apply to the whole media query (not individual attributes):

Are you using the HTML viewport meta tag?

Typically, not all devices have the same width, so in our HTML we need to specify the following meta tag:

In the above, we just specify the width to adhere to the device-width and the zoom ( initial-scale ) to be the default of 1.

💡 Tip: When emulating devices in chrome, make sure to also add the minimum-scale: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Hopefully, these tips will help you to get your media queries working properly. Remember to double-check your syntax, make sure that there are no conflicting CSS styles (min and max width breakpoints), check that you are using the HTML meta viewport tag, check for correct breakpoints. Good luck!

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

• [Fixed] CSS :after element is not working
• [5 FIXES] for CSS z-index not working - Updated for 2023
• How to Create CSS Animation Fade In with Examples
• Fixing CSS position sticky not working issues
• Fix JavaScript setTimeout not working
• CSS Spin Animation on hover

[SOLVED] iphone @media queries not working in (mobile-)Safari

I’m using the following media queries, and they work fine in the Chrome iPhone8 & responsive modes in DevTools.

But I just tested on Safari and the ios simulator and it fails.

Here’s a stackblitz

https://angular-ionic4-test-udtdf4.stackblitz.io

[solved] use max-width instead of max-device-width

see this answer: Safari Responsive Design Mode CSS media query ‘device’ not applied

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari Bug - max-width:100% and tiny viewport #108

mcyoung commented Aug 27, 2014

• 👍 1 reaction

mkoryak commented Sep 3, 2014

Sorry, something went wrong.

mcyoung commented Jan 16, 2015

Mkoryak commented jan 21, 2015, mcyoung commented jan 21, 2015, mkoryak commented feb 1, 2015, mkoryak commented feb 25, 2015.

saintger commented Feb 26, 2015

Mkoryak commented feb 26, 2015, mkoryak commented feb 27, 2015, saintger commented mar 1, 2015.

lock bot commented Dec 10, 2019

No branches or pull requests

• Trending Categories

• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

The min-width and max-width declaration for Flexbox doesn't work on Safari? Why?

To make the Flexbox work on all the web browsers , use the min-width and max-width equivalents of flex. For example, for this −

Use the CSS Shorthand Property. It states flex-grow | flex-shrink | flex-basis as shown in the below syntax −

For the above, we can set the Flex as −

Let us now see a Flexbox example that works on all the web browsers. We have two divs inside our parent div parentBox −

The style for the parent container. We have use the CSS Flex shorthand property −

For the Child i.e. childBox, we have again used the shorthand property to set the flexible length on flexible items −

The nested child in the above .childBox is set with Flex. This and the above nests the flex containers −

Here’s the complete example −

• Related Articles
• Set min-width and max-width of an element using CSS
• Perform Animation on CSS min-width
• Perform Animation on CSS max-width
• Setting a Fixed Width for Items in CSS Flexbox
• CSS min-width property
• How to set the min and max height or width of a Frame in Tkinter?
• CSS max-width property
• The min-width Property in CSS
• Use CSS max-width property for responsive image
• The max-width Property in CSS
• Why Black hole doesn\'t emit the light?
• Use CSS max-width property responsive for video player
• How do min-content and max-content work?
• Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
• max() and min() in Python

Kickstart Your Career

Get certified by completing the course

Max-Width not working for >img>

Tell us what’s happening:

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’ AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal ‘none’

Your code so far https://Nisha-Tribute-Page.nbhawnani.repl.co

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

Can you share a link to the code?

It would be better than us having to open up the dev tools.

Edit: It looks like you have a few inline styles but there are some errors.

I would ditch the inline styles and move everything to the css section and make sure the syntax is correct.

https://Nisha-Tribute-Page.nbhawnani.repl.co

Did you make any changes?

It still looks the same to me.

I was hoping to get some suggestions as to what to change to make it work

Have you tried moving all of your styles to the css section like I suggested earlier?

I would try that first. Having all of your css separate from the html will make it easier to find your issue instead of placing it all inline.

Also, the test message has changed. Reopen the test suite to read the new error message.

Also, be careful about this align:center . I think you meant text-align:center But there are other ways to center an image.

If you google how to center image css, then you will get the code on how to do that.

Hope that helps!

it worked - thanks much for your help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

• Home New Posts Forum List Trending New Threads New Media Spy
• WikiPost Latest summaries Watched WikiPosts
• Support FAQ and Rules Contact Us

Safari not computing image aspect ratios from width and height attributes

• Thread starter sulliops
• Start date Mar 30, 2021
• Tags ios ios 14 macos macos 11 safari safari 14 webkit
• Sort by reaction score
• Web Design and Development

macrumors newbie

• Mar 30, 2021

I've recently implemented a lazy image loading feature on an image-heavy website, and have been having issues with reflow. I fixed the problem by manually specifying the image dimensions using the `width` and `height` image attributes, as below: Code: <img class="lazyload img-fluid" data-src"/path/to/image.jpg" width="200" height="400" /> It works great in every browser except Safari, but I'm confused because Safari 14 supposedly supports computing aspect ratios based on the `width` and `height` attributes . None of my up-to-date macOS or iOS devices seem to recognize this feature in Safari, but they do in every other modern browser. The expected outcome is that the spot on the page where the `<img />` tag is located should be reserved (painted) based on the calculated aspect-ratio using the `width` and `height` attributes, to be later replaced by the `data-src` attribute via the lazy-loading plugin. In Firefox and Chrome (+ Chromium-based browsers), the space is reserved until the image is loaded (to prevent reflow); in Safari, the space is not reserved and the page shifts after the image is loaded. Here's a CodePen example with near identical code to mine (you should open in Safari and click immediately on "Nav 4" to see the issue): https://codepen.io/sulliops/full/QWdwRxx Here's a screencap of my issue: https://gyazo.com/da76046282965f7a32ed3d85cc7423df Anyone have any clue as to what I'm doing wrong? I'm not worried about backwards compatibility (Safari doesn't support the feature in question before 14.0) or IE support, so this solution is perfectly fine for me until `aspect-ratio` becomes available in browsers other than Chrome. Safari is important, though, so I'll take any suggestions.  

macrumors god

Hmm... the images on the front page are lazy loaded, and is working properly in saving the space. Let me look at your code a bit more closely.  

arn said: Hmm... the images on the front page are lazy loaded, and is working properly in saving the space. Click to expand...

I figured it out I think. You need a non empty "src" for Safari to calculate the size. try adding src=" https://images.macrumors.com/images-new/1x1.trans.gif " to your <img> html arn  

arn said: I figured it out I think. You need a non empty "src" for Safari to calculate the size. try adding src=" https://images.macrumors.com/images-new/1x1.trans.gif " to your <img> html arn Click to expand...

sulliops said: Wow, that is beyond inefficient — but it worked in the CodePen. Actually applying that fix on my production website didn't do much good, though — it actually broke compatibility with other browsers, including Safari, and the reflow issue is back in full swing. Any ideas? Click to expand...

Opinion Harris is beating Trump by transcending him

The vice president and her running mate are achieving a radical shift in messaging.

The sudden and radical shift in the trajectory of the 2024 campaign owes to more than the replacement of President Joe Biden with Vice President Kamala Harris as the Democratic candidate. To a degree that’s still not fully appreciated, Harris has embraced an entirely new strategy: She’s not just pushing back against Donald Trump’s politics of cultural division. She’s bidding to transcend it.

Choosing Minnesota Gov. Tim Walz as her running mate reinforces the move away from clichés about “coastal politics” and “cultural elites.” Instead, she wants to fight on specific, practical measures government can take to improve lives, from family leave to expansions of health coverage. Both Harris and Walz are speaking a soothing and — to pick up on Democrats’ favorite virtue these days — joyful language of patriotism and national unity.

You could tell the Trump campaign was thrown off by the Walz pick when the GOP’s vice-presidential candidate, JD Vance, attacked the camo-wearing, gun-owning, small-town Midwestern schoolteacher as a “San Francisco-style liberal.”

Never mind that Vance lived in the Bay Area for about four years while Minnesota’s Walz visited the place for the first time only last month . The tired misfire speaks to how dependent the GOP is on stereotypes about who “liberals” are and what “liberalism” means.

Follow E.J. Dionne Jr.

Trump and Vance want liberals to be Ivy League-educated people (which describes both members of the Republican ticket but neither of the two Democrats) who look down their noses at “flyover country” and disrespect the values of small towns and the countryside. They absolutely do not want to deal with a liberalism that extols “community” and “freedom” (two of Harris’s favorite words) and favors a government active in areas where most voters favor more public action to ease their circumstances.

All the ink spilled about who was a more “centrist” or “liberal” pick for the VP job lost track of the fact that while Walz is, indeed, the second kind of liberal he is the very antithesis of the first, the variety that Republicans love to parody.

My favorite indicator of the campaign’s cultural revolution: For years, social scientists have noted that Starbucks drinkers are more liberal while Dunkin’ drinkers are more conservative. But the Harris campaign started selling T-shirts with “Harris-Walz” in the colors and typeface of Dunkin’. So much for “latte liberals.”

The contrast Harris is trying to bring home was underscored last Thursday in dueling appearances by the two nominees. Standing amid the faux-gilt of his Mar-a-Lago hotel, Trump, who has largely been homebound at a crucial point in the campaign, talked a lot about himself .

“Nobody’s spoken to crowds bigger than me,” he said , returning again and again to a slew of false claims comparing the sizes of his rallies to historic gatherings, including the 1963 March on Washington at which the Rev. Martin Luther King Jr. described his dream for the nation.

Meanwhile, Harris was in Michigan at a United Auto Workers local flanked by Walz and Shawn Fain, the union’s visionary president, to extol “the dignity of work” and the value of collective action.

While Mar-a-Lago Trump called the United States as a “very, very sick country right now,” Harris spoke an actual populist language with a strong emphasis on patriotism.

“Our campaign is about saying, ‘We trust the people, we see the people, we know the people.’ You know one of the things I love about our country? We are a nation of people who believe in those ideals that were foundational to what made us so special as a nation. … We love our country.”

The (perhaps unfair) irony is that such sentiments seemed old-fashioned from Biden but sound fresh when put forward by a younger woman — from California, for goodness’ sake! — whom no one can think of as a fogey. In a way that an 81-year-old incumbent never could, she can make calls for a bit of political peace forward-looking (“We’re not going back”) and harness the nation’s exhaustion with Trump’s gloomy acrimony.

James Davison Hunter is the distinguished University of Virginia sociologist whose 1991 volume “ Culture Wars ” first brought that term to wide attention. His fascinating new book, “ Democracy and Solidarity ,” includes an observation essential not only to rebuilding the solidarity he rightly thinks we need but also to understanding what’s going on in the 2024 campaign. “It is critical,” Hunter writes, “that we rediscover human beings underneath the abstractions of our inflammatory symbolic politics.”

When a literally straight-shooting football coach like Walz becomes the adviser to his high school’s Gay-Straight Alliance because he doesn’t like seeing LGBTQ kids bullied, he moves discussions of sexual identity from academic gender theory to simple, small-town decency. When Harris says, “We love our country,” pay attention to those words “we” and “our.” Harris and Walz are waging war on “inflammatory symbolic politics.” And, yes, it’s a joy to watch.