Safari shows a contrasting outcome

Having an issue with compatibility in the safari browser

You can check out the site here:

The problem lies with the text inside the image, I want it to display properly like it does in Chrome.

Here is the desired result for Safari as well.

Below is the CSS code for the text:

.title_home {
    z-index: 100;
    background-color: rgba(134,35,20,0.8);
    width: 75%;
    min-height: 15%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 70%;
    left: 12%;
}

Answer №1

Issue resolved

I must include

display: -webkit-flex;

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

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

When working with my HTML content, I came across the following line: <span>(48 עמודים סה"כ )</span> I am seeking a way to extract only the text "48 עמודים סה"כ" and store the number 48 into an integer variable. Although in t ...

The conversion of a newline in an Angular page is done using &lt;br/&gt tag

Here is a function I have: setLocalVariableOnAccepted(ogp, hb, responseJson) { if (responseJson.ofgp === undefined) { this.ogpStatus = 'orange'; this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous va ...

obtain the text content from HTML response in Node.js

In my current situation, I am facing a challenge in extracting the values from the given HTML text and storing them in separate variables. I have experimented with Cheerio library, but unfortunately, it did not yield the desired results. The provided HTML ...

When the window width increases, the image within a flexbox causes the flexbox to break

I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...

The division is refusing to make an appearance

As I embark on creating my very first website, I'm encountering some obstacles in translating my vision into reality. The #invokeryolo div is proving to be elusive and no matter how hard I try, I can't seem to make it appear on the screen. Below ...

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

I have a main HTML page and I need to insert a dynamically generated list from a template in another HTML file that I created. The template for each item in the list is located on a separate HTML page. My goal is to create multiple instances of this HTML ...

Node/Angular application facing a breach in content security

After working on a website built with node/express/angular/javascript, I returned to the project months later only to find that I couldn't display any page of the application when running it locally on node js. The error message "cannot get "{webpage} ...

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

Integrating a fictitious style using jQuery

Having some trouble with this code snippet. The issue arises when trying to apply the following style using jQuery. CSS .arrow_box { position: absolute; width: 24px; border-radius: 30px 30px 3px 3px; height: 17px; float:left; } .arrow_box:after { bord ...

Fluid design: prevent alteration in body width caused by vertical scrollbar

I have successfully implemented a liquid layout for my website by setting the body tag width to 100%. <html> <head> </head> <body> <div id="container"> some content </div> </body> body { mar ...

Inquiry about CSS Media Queries

I am facing an issue with CSS media queries... For my HTML page, I have separate files for desktop and iPad styles - desktop.css and ipad.css. In desktop.css, I have used @import url("ipad.css"); and added a @media not only screen and (device-width:768px) ...

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

JavaScript functions cannot be applied to input fields in jQuery

I am having trouble saving values into a database where I need to calculate the total and grand total. I want to do the calculation in the input field, but my attempts have not been successful. It seems like the issue lies with $('.multTotal',thi ...

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

Why is my data not being saved to the database when using eloquent?

I am encountering an issue with my form submission. Although the data is present when using dd() on Requests, the save() function does not work as expected, resulting in the data not being stored in the table. I am attempting to add new Users via a backoff ...

My custom CSS being overridden by Bootstrap styles

I'm currently working with Twitter Bootstrap's CSS, but it seems to be overriding some of my custom classes. Initially, I placed it before my own CSS in the HTML header (I am using jade and stylus template engines): doctype html html head ...

Using a Jinja 'for' loop to create nested 'If' statements

I'm attempting to include an if statement within a loop for a jinja template: </table> <class="container"> <table border ="1"> <caption> BBOXX <caption> <thead class="thead-inverse"> <tr> <th& ...

Transferring Data Between Two Modals

Currently working on developing an approval/edit process for the company website. The setup involves a jquery datatable that showcases scheduled events specific to the logged-in user in a particular format. results = await response.json(); var tr = $(this) ...

Fetching Information From Database Using PHP

I am encountering an issue while attempting to transfer data from my HTML table to my modal (without using bootstrap). In the image below, you can see that I have successfully displayed data from MySQL database in the table. The problem arises when I clic ...