What could be causing Safari to alter the heights of my div element?

After completing a challenge for FrontEnd Mentor, I excitedly texted a friend my demo link to showcase my work. However, upon opening the link on my phone, I discovered that the formatting was all over the place. Switching to Safari on my desktop only made matters worse as the height of the div.selected-plan element went out of whack.

Here's how it appears on Chrome: https://i.sstatic.net/NshuV.png.

And here's the distorted Safari version: https://i.sstatic.net/WWp03.jpg.

Check out the live site to see the HTML/CSS code.

I'm puzzled by why Safari is distorting things and I need guidance on how to prevent this from happening in the future.

htmlcsssafarifrontendcross-browser

Answer №1

To achieve the desired height for your SVG, you can use the following CSS:

.music-icon {
    margin: 1em;
    padding: .25em;
    max-width: 48px;
    max-height: 48px;
}

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

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Dual Image Flip Card Effect for Eye-Catching Rotations

In the process of enhancing a website, I am interested in incorporating a feature that involves multiple cards with both front and back sides (each containing separate images). Initially, the plan is to display only the front side of the card. Upon clickin ...

javascripthtmlcssfrontend

Nested flexbox causing Firefox to malfunction in handling overflow-y

I successfully created a layout using CSS3 flexbox that spans 100% width and height. This layout functions properly on IE11, and possibly on IE10 when emulating IE11. Unfortunately, I encountered an issue with Firefox (35.0.1) where the overflow-y propert ...

cssfirefoxoverflowflexbox

"Select2 dropdown fails to function properly upon returning to the page using the browser's

I've encountered an issue while working on a search page with Select2 dropdowns. Everything functions smoothly upon the initial page load, however, problems arise when a user performs a search, hits the browser back button, and then revisits the page. ...

javascripthtmlasp.net-mvcrazorjquery-select2

The copying of array values is not supported by Chromium

While utilizing Webworker to process an array of pixels from Canvas and then assign it back, I encountered a strange behavior. Firefox works flawlessly in this scenario, however, Chromium seems to insert an empty pixel array into the Canvas. Upon further ...

javascriptarrayshtmlcanvaschromium

The focus on the input text in AngularJS functions properly on desktop devices but not on iPads

I am facing an issue with the search input box in my application. Even though the search input opens when I click a button, it is not autofocusing. Here is the snippet of my code: $scope.goSearch = function () { $scope.$broadcast("focusTextInput"); } ...

javascripthtmlangularjs

Selenium is transitioning to precise locations

Using the python library to control mouse movements, I have encountered an issue while trying to specify a pattern or random motions for the mouse. Initially, I attempted to determine the size of the //html element and use that information to establish bo ...

pythonhtmlselenium

How can images be concealed while displaying text only during the printing of a page by the user?

I am currently working on creating a print CSS file. My goal is to hide the header image div located at the top of the page while still keeping the text inside it visible. I want to ensure that there is no empty space left for the div on the page. This CSS ...

htmlcsstextprinting

Regular expression for calculator input including a decimal point and negative sign

I'm in need of a regular expression to validate specific inputs: -0.12-12.56 -0.12+12.56 -0.12*12.56 -0.12/12.56 12.3--12.56 12.3+-12.56 12.3*-12.56 12.3/-12.56 -0.12--12.56 -0.12+-12.56 -0.12*-12.56 -0.12/-12.56 0.12-12.56 0.12+12.56 0.12*12.56 0.12 ...

angularjsnode.jshtml

Retrieve the text content within HTML tags that come after a specific paragraph using the DOM

I am looking to extract content from HTML documents. Specifically, I need the contents of all 'p' tags that come after 'h2' tags. Here is an example of the HTML to be parsed: <h1>Lorem ipsum</h1> <p> Lorem ipsum ...

phphtmldomdocument

Conceal the nearest parent element above using JavaScript (or jQuery)

I need to implement a functionality where clicking a button hides a specific HTML class. The structure of the HTML is as follows: <thead> <tr class="employee-list"> <th> <button class="show-emp">S ...

javascripthtmljquery

Attempting to superimpose a CSS triangle arrow onto a Google Map

I'm currently working on incorporating a CSS arrow on top of a Google map as a design element. The concept involves a horizontal stripe with a downward arrow placed halfway through, and I aim to have this arrow overlay the Google map. Here is a snipp ...

htmlcssgoogle-maps

tap into adhesive, translucent screen

I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...

cssiframetransparency

Displaying genuine HTML content in a React application using Algolia Instantsearch

After setting up a demo app using React with an Algolia search feature, I uploaded some indices into Algolia. The content consists of raw HTML. Is there a way to display this content as real HTML using Algolia? ...

javascripthtmlreactjsalgolia

What is the best way to ensure my 2x1 table product description is displayed vertically and mobile responsive?

I need help displaying my product description in this format: ...

html

What is the best way to choose a random image in a Django template?

I am currently facing an issue with selecting a random image in my Django template each time the page loads: <!--<img src="{% static 'images/640px-Waaah.jpg' %}"/>--> <img src="{% static 'images/Crying_Baby.jp ...

htmldjangodjango-templates

HTML 4.01 character and character offset attributes

I'm curious about the purpose of the charoff attribute in HTML 4.01 Transitional. Specifically, consider a table column that contains the following cells: <td>1.30</td> <td>10</td> <td>100.2</td> <td>1000 ...

htmlchar

The technique for concealing particular div elements is contingent upon the specific values within an array

My TypeScript code is returning an array in this format: allFlowerTypes (3) ['Rose', 'Bluebell' , 'Daisy'] I want to dynamically show or hide the following HTML content based on the array values above: <ul> <li> ...

htmltypescript

selectors that seem to be floating

I attempted to line up certain selectors horizontally on the same line using float:left. However, it did not work as expected! Could someone please assist me with this issue? http://jsfiddle.net/6YKhT/ ...

htmlcss

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2