Please Help, web elements is not showing properly in Safari browser

Store Design
, ,

Topic summary

A Shopify store owner is experiencing display issues with web elements specifically in Safari browser after implementing custom CSS modifications to their header section.

Customizations Made:

  • Logo sizing and positioning adjustments
  • Header layout modifications with responsive breakpoints for desktop (1024px+) and mobile (719px and below)
  • Search bar margin adjustments
  • Promo icon height and spacing changes
  • Cart icon, account link, and related SVG element styling

Notable Issue:
Part of the CSS code appears corrupted or reversed (text displayed backwards), suggesting potential encoding or copy-paste problems that could be causing the Safari rendering issues.

Current Status:
One respondent acknowledged the customization work and offered further assistance, but no specific solution to the Safari display problem has been provided yet. The discussion remains open with the core browser compatibility issue unresolved.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

https://jmudental.com/?_ab=0&_fd=0&_sc=1

I did some customize

Screenshot 2023-03-06 at 4.19.45 PM.png
Screenshot 2023-03-06 at 4.19.45 PM.png1363×308 133 KB

Here is my code

.site-logo {
max-width: 300px;
}

@media screen and (min-width: 1024px) {
.site-header-logo {
display: inline-block;
height: auto;
margin-right: 25px;
margin-bottom: 2.5rem;
margin-left: 55px!important;
}
}

@media screen and (max-width: 719px){
.site-header-logo {
margin-left: 8rem;
}
}

/* Search bar */
.site-header-main .live-search {
margin-left: 1rem;
margin-right: 1.25rem;
}

/* promo icon */
.small-promo .small-promo-icon{
height: 4.75rem!important;
}

@media screen and (min-width: 1024px){
.small-promo-icon {
margin-right: -0.25rem;
}
}

.small-promo-content_heading{
font-size: small;
font-weight: normal;
letter-spacing:0.5px;
}
.small-promo-content–desktop{
font-size: small;
font-weight:bold;
}

.site-header-actions .site-header-cart-icon svg, .site-header-actions .site-header-actions__account-link svg, .site-header-actions .site-header_account-link-anchor svg {
max-height: 3rem;
max-width: 100%;
}

.site-header-actions .site-header_account-link-text{
font-size:large;
}

@media screen and (min-width: 1024px){
.site-header-right {
display: flex;
height: 46px;
margin-right: 3.25rem;
}
}

/* cart icon /
.site-header-cart svg {
/ transition: margin .15s cubic-bezier(.4,0,.2,1); */
height: 40px;
width: 40px;
}

@media screen and (min-width: 1024px){
.site-header-cart {

margin-right: 2.75rem;
}
}

2

hello there

Based on the code you provided, it looks like you’ve customized the header section of your Shopify store using CSS. Here’s a breakdown of what each section of the code does:

  • .site-logo: Sets the maximum width of the site logo to 300 pixels.
  • .site-header-logo: Displays the site header logo as an inline block and sets the margins for the desktop view.
  • @media screen and (max-width: 719px): Overrides the desktop margins for the mobile view.
  • .site-header-main .live-search: Sets the margins for the search bar.
  • .small-promo .small-promo-icon: Sets the height of the promo icon to 4.75rem and adjusts the margin for the desktop view.
  • .small-promo-content_heading: Sets the font size, font weight, and letter spacing for the promo content heading.
  • .small-promo-content--desktop: Sets the font size and font weight for the promo content for the desktop view.
  • .site-header-actions .site-header-cart-icon svg, .site-header-actions .site-header-actions__account-link svg, .site-header-actions .site-header_account-link-anchor svg: Sets the maximum height and maximum width of the cart and account icons.
  • .site-header-actions .site-header_account-link-text: Sets the font size for the account link text.
  • @media screen and (min-width: 1024px): Overrides the desktop margins for the cart icon.

Overall, it looks like you’ve done a great job customizing the header section of your Shopify store! Let me know if you have any further questions or if you need additional assistance.