Formatting help required - phone view page is too wide

Hi, could I get some help with a formatting issue please? I’m building a new site for my band, and at the moment the page doesn’t quite fit properly on a vertical phone, you have to scroll right to see the menu hamburger, then left to see the menu items. Sure it’s something simple, still learning Wappler.
http://gloom.band/
Thanks for your help. Note this site is a work in progress, links not working yet etc.

The reason that is happening is because the page is running out of real-estate on smaller screens. The problem lies with the excess number of columns and content in the following lines of code

Change lines 64-74 from

<div class="container">
  <div class="row"> 
   <div class="col-3"></div>
    <div class="col-6">      
      <br>
      <img src="grafix/LOGO_GLOOM.png" class="d-md-none d-sm-none d-xl-inline d-lg-inline d-none">
      <img src="grafix/LOGO_GLOOM_sm.png" class="d-lg-none d-xl-none d-sm-inline d-md-inline">
    </div>        
    <div class="col-3"></div>
  </div> 
</div>

to

<div class="container">
  <div class="row"> 
    <div class="col">      
      <img src="http://gloom.band/grafix/LOGO_GLOOM.png" class="d-none d-lg-block mx-auto">
      <img src="http://gloom.band/grafix/LOGO_GLOOM_sm.png" class="d-block d-lg-none mx-auto">
    </div>        
  </div> 
</div>

Note:

  • when the container is full width for all sizes, there is no need to assign a value as in col-12
  • the large image is not visible (d-none) except for larger screen sizes. By default, images are inline-block level, but an auto margin only works on block level elements. That is why we apply d-lg-block to show the image and use mx-auto to center the image.
  • the small image is visible in small screens but we need to change it to a block level element, hence the d-block. The image is hidden for large screens (d-lg-none). The centring is done using mx-auto.

I hope that helps

1 Like

Thanks Ben, really appreciate the help. I’ve changed the code as suggested, however cannot see any difference in the result. I suspect it may be caused by the navbar - which I have as an include. Are you able to see the navbar code or could I send it to you?
Thank you, AJ

No it is not the navbar. The problem lies with the Facebook script. I am not sure what it does and what the result will be if you moved the script either to the end of the body elemment (just above the
</body> tag) or if you moved it to just above the </head> tag. The script that I am referring to is lines 50-56 and reads

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v3.1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Try it and see what happens.

Forget what I said above, I’ll get back to you with the correct answer.

You are correct Ben, that was definitely causing the issue. I’ve just removed the FB code altogether and it renders fine now on all platforms. Thanks very much for your help :slight_smile:

If you want to keep the buttons, add the following immediately after the opening body tag

<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = ‘https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v3.1’;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

(Sorry, the forum will not allow me to format the first line in with the script)

Then where you want the FB buttons, place the following code

<div class="fb-like" data-href="http://gloom.band/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

This is similar to what you had before with the exception of data-layout which is now "button"

That should work.

3 Likes