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

Design an arrangement using div elements and CSS styling

Creating a layout for a website can be challenging. I am using three div tags - container, left, and right. My goal is to have the left side fixed-width for navigation, while the right side displays dynamic content loaded from a database. However, I'm ...

How to Use Absolute Positioning in Bootstrap 3.0 to Position Child Divs

I have a div block that needs to always be displayed at the bottom of the section, regardless of whether the section above is empty. The inner div should stay at the bottom of the section, as shown in the attached image. This is my current code: <div ...

In Firefox, the image width may vary compared to the one that was originally inserted

Greetings to all! I have encountered an issue while using jcrop with Firefox as my browser. It seems that the image size does not match the actual dimensions, allow me to elaborate. The image appears to be 20% larger than its displayed size, despite being ...

Designing a multi-platform web browser application for Android, iOS, and Windows 10

I've developed several web applications using HTML5 technology and now I'm interested in creating my own custom web browser specifically tailored for my apps/sites. I want it to have a native appearance, but essentially just wrap around my web ap ...

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

The reload button retains functionality while being present within an Angular2 form, allowing for a seamless user experience. The

After some observation, I have realized that when a button is placed inside a form but has no connection or function related to the form, such as a back or cancel button, it unexpectedly reloads the entire page. For instance, let's consider having ...

Tips for refreshing the page without losing the values of variables

In my simulation.jsp file, I have the following code that retrieves simulation data from a struts2 action: $(document).ready(function() { var data='<s:property escape="false" value="simInfos" />'; } Once I perform the simulation with this ...

Attempting to Create a New User and Display the Resulting Page Using JavaScript and Handlebars Templates

I've implemented a form that allows users to input data. Once the user hits "Add User", they are successfully added to the database. However, instead of transitioning to the next page as expected, the form remains populated on the current page. The h ...

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

The POST request is coming back as null, even though it includes both the name and

Having issues with a login PHP code where the post method is returning an empty string. Here is my HTML code: <form action="iniSesion.php" method="post"> <div class="form-group"> <input type="email" name="email_" class ...

Using a Mixin as an Argument in Another Mixin in LESS CSS

Is it possible to pass the declaration of one mixin or style to another mixin as an input parameter? Consider the following example involving animation keyframes. This is how keyframes are typically defined in pure CSS: @-moz-keyframes some-name { fr ...

What is the best way to select an HTML tag element using the :v-deep() selector?

When I utilize the following: ::v-deep img { ... } it functions but triggers a deprecation warning: [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. How can I achieve the same effect using ...

Looping through PHP code to encapsulate HTML elements

As a newcomer to PHP, I appreciate your patience as I navigate this new language. My goal is to wrap a div around elements like the "h4" tag without disrupting the for loop. Is this achievable? Thank you. <?php $con=mysqli_connect("localhost","root"," ...

What are some possible causes for an iframe failing to load?

When it comes to iframes failing to load their content, there could be various reasons causing this issue. I recently encountered a situation where an iframe on my site's "thank you" page was not displaying any content when inspected using Chrome dev ...

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

PHP MySQL outputting data in a dropdown menu format

Struggling to extract data from a database and display it as a dropdown list. I am fetching the foreign key, its unique code, and its name/title to be displayed in a dropdown list for input into a new table. $sql = "SELECT quali_code, title FROM ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Vuetify vueJS dialog with elevated design

Is there a way to completely remove the elevation of a v-dialog so that it has no shadow at all? The elevation property in the v-dialog itself and using the class as Class = "elevation-0" have not worked for me. Here is the link to the component ...