增加移动 shopify 上的横幅宽度

Question

I created a page template for a page, using a banner + 2 products.

The issue is on mobile, where I can't make the banner wider. It stays with some margin left and right, making the image unapropriate for the user xp.

I tried using js to make it forcefully wider, but it kept the margin. I even made a function to get the viewport width and set the banner in px to it, with no results. Can anyone give me some light?

The classes below are premade by the theme creator.

Banner section:

<section  class="parallax-banner parallax-slide slide parallax_effect--{{ section.settings.parallax_effect }}" id="slide-{{ section.id }}">
  <div id="bannerImg" class="bcg {% if section.settings.image == nil %}bcg-placeholder{% endif %}"
      {% if section.settings.parallax_effect %}
        style="background-image:url({% if section.settings.image != nil %}{{ section.settings.image | img_url: '1600x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %})"
        data-bottom-top="background-position: 50% 200px;"
        data-top-bottom="background-position: 50% -200px;"
        data-anchor-target="#slide-{{ section.id }}"
      {% endif %}
      >
      {% if section.settings.link != blank and section.settings.button_label == blank %}
        <a href="{{ section.settings.link }}" class="full-link">
          {{ section.settings.link }}
        </a>
      {% endif %}
      <div class="hsContainer">
        <img src="{% if section.settings.image != nil %}{{ section.settings.image | img_url: '1600x' }}{% else %}{{ 'placeholder.svg' | asset_url }}{% endif %}" alt="{{ section.settings.image.alt | escape }}" class="hsContainer__image">
        <div class="hsContent">
          <div class="container">
            <div class="columns {% if section.settings.text_position == 'left' %} eight offset-by-one {% elsif section.settings.text_position == 'right' %} eight offset-by-eight {% else %} sixteen {% endif %} align_{{ section.settings.text_alignment }}">
              <div class="{{ section.settings.headline_animation }}">
                {% if section.settings.title != blank %}
... (unecessary code not pasted)

Page template code:

<div class="container main content main-wrapper">

  <div class="sixteen columns page clearfix">

    <div>
      {% include 'page-multi-column', content: page.content %}
        {% section 'aniversariante-img-overlay' %} 
       {% section 'aniversariante-promocoes' %} 
    </div>
  </div>
</div>

<script>
  var size = getViewportSize().w;
  console.log(size);

 document.getElementsByClassName("hsContainer")[0].style.width = size+"px !important";
 document.getElementsByClassName("hsContainer")[0].style = "margin: 0";

  function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}
</script> 

Live page location: https://clubeporcao.com.br/pages/aniversariante

I already tried:

• removing the classes, with result, but broking the page
• removing the container class padding, with no result
• putting width to % and px
• setting margin to 0
• getting into chrome inspect element and try to find where the padding/margin is being set

Answer 1

Hacky solution:

#slide-aniversariante-img-overlay {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

Explanation:

You want to make a child element of your .container (which has a fixed width) wider than this container. You know the width of you .container for a picked breakpoint but you can't tell how much space is avaible at the left and right.

You can check it with JavaScript like you already tried, but then you are forced to add an event listener after resizing (because those values will change).

Above I've set the child width to 100vw (100% of the viewport width) - so it has a right width but we don't know the value of margin we should use.

We probably could use margin-left: calc( 100vw / 2 - Xpx); where X is the width of .container but instead, I've added position relative and move this slide to the middle width left: 50% - it is 50% of the parent element (if you turn off the transform you will see that the slide starts exactly in the middle of the window). transform: translateX(-50%) will set slide in the right place because it works on the child's width not parent's.

Caution: For some zoom options, horizontal scroll can appear, you can wrap a banner in a separate section with overflow: hidden; (but if you could do this you probably would remove .container already) or add overflow-x: hidden; to the body.