Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Can someone assist me in identifying the issue that is causing the product page on this website () to be too wide?

Here is an image highlighting the issue.

I made some CSS customizations to make the product gallery full width and added padding to the product info below. However, when viewing the site on mobile, there seems to be a width problem where you can drag to the right. I am having trouble pinpointing the cause of this issue. Any suggestions on how to resolve it would be highly appreciated.

Thank you!

Here is the CSS code I implemented:

@media screen and (max-width: 768px) {
  .t4s-col-item {
    padding-right: calc(var(--ts-gutter-x) * 0) !important;
    padding-left: calc(var(--ts-gutter-x) * 0) !important;
  }
  .t4s-product__info-container {
    padding-right: 8% !important;
    padding-left: 8% !important;
  }
}

Answer №1

Your webpage is experiencing a couple of issues causing it to be wider than the viewport

  1. The div containing the main image has negative margins, pushing it beyond the viewport. Adjusting the margin to zero will bring it back inside the viewport. Here is the selector for the problematic div:

    #shopify-section-template--19329150189906__main > div.t4s-container.t4s-main-product__content.is--layout_wide.t4s-product-media__thumbnails_left.t4s-product-thumb-size__large > div > div > div

  2. The div wrapping the review list has a 100% width and left/right margins, causing it to extend beyond the screen width. You can either reduce the width or use padding with box-sizing: border-box. Here is the selector for this div:

    #AirReviews-BlockWrapper > div > div > div.AirReviews-Blocks__List

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

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

Enhance Bootstrap modals by automatically adjusting the background shadow mask when resizing or changing the content within the modal window

Incorporated within my bootstrap modal window is a form alongside a link that triggers the jQuery functionality of .slideToggle(). By interacting with this link, a concealed div expands. Consequently, the size of the modal popover becomes fluid. Upon click ...

Issue with CSS pseudo-elements :before and :after in Internet Explorer

I am attempting to create a heading with lines on both sides, but I am facing an issue where it only seems to work on the left side in IE. Check out the code here h2 { position: relative; overflow: hidden; text-align: center; } h2:before, h2:afte ...

What is causing the z-index to not function properly on my elements?

In my current code setup, I have positioned the hero image at the bottom with an overlay on top that contains text and a button. Additionally, there is a navigation bar with a z-index applied. However, I am facing an issue where the button for viewing my r ...

Create a div that can grow in size without the need to set a specific height for it

Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...

Using media queries, one can adjust the positioning of elements in CSS

Can someone please help me? I'm struggling to change the position of a div from absolute to static when the page width reduces to 800px. The challenge is that I can't modify certain code because I am displaying a slideshow that maintains an aspec ...

What is causing the colorful background to not fully cover my page when I make the window smaller?

I'm currently designing a webpage that features a dynamic gradient background. Within this webpage are two columns - one displaying an image of a phone, and the other containing text. In full screen mode, everything looks perfect. The gradient stretch ...

Adjust the height of a DIV element using Jquery Resizable to a minimum height of 1px, smaller than its default value

Having an issue with the Jquery UI Resizable functionality. I've implemented Jquery resizable to adjust a div's width and height dynamically. It's been working well, but I'm encountering a problem when attempting to decrease the height ...

What is the best way to implement a responsive layout in Bootstrap 5?

<body> <header> <nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319"> <div class="container-fluid"> <div class="navba ...

Effortless floating made possible by the magic of Twitter Bootstrap

I am currently working with a group of elements that are designated as row-fluid and span12, each containing span4 elements. My goal is to have these elements automatically align in columns of 3, regardless of how many are present. However, I am facing an ...

Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the da ...

Tips for customizing the transparency of a Bootstrap dropdown menu

I'm currently working with .navbar-default { z-index:99; opacity:0.8; } However, I am looking to adjust the opacity of dropdown menu items to 0.9. I have attempted several solutions without success. Here are a few examples: .dropdown-menu>li> ...

The @media feature is not functioning properly

I am struggling with getting my media query to function properly on a school project. Despite carefully checking my code, I cannot figure out why it is not making the desired changes when viewed on a mobile device. If anyone has any suggestions or insigh ...

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

A code snippet designed to ensure uniform height for all floating div elements

Hello, I am facing an issue with resizing 20 left-floated divs of varying heights on my website. Previously, when my website was designed using pixels, a script worked perfectly for resizing them. However, after switching to a percentage-based design (% d ...

When you reach a scrolling distance of over 300 vertical heights,

Is it possible to show and hide a class based on viewport height? I am familiar with displaying and hiding a class after a specified pixel height, but I'm wondering if it's achievable using viewport height instead? Specifically 3 times the viewp ...

Customize Joomla content in a component by using CSS within a template that I personally designed

Is there a way to customize the text content of a component in Joomla by editing the body text? The CSS properties for #content are adjusting padding, margin, border, width, height, and background but not affecting font attributes... Inside index.php < ...

The stylesheet link for "contact.css" is unresponsive

I have been reorganizing my website portfolio by categorizing CSS, images, and other files into different folders. <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/contact.css"> However, I am facing an issue where ...

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...