Solved Responsive Width & Height - Gap Underneath

Discussion in 'General Muse' started by Ahmed El-Alfy, May 16, 2017.

  1. Ahmed El-Alfy

    Ahmed El-Alfy Member

    9
    0
    Hello

    when I set an image to be responsive sizing width and height, the gap underneath the image to the bottom of the page gets bigger and bigger which forces me to create lots of unnecessary breakpoints to move the bottom of page back up. Is there a way to solve this? Or is it a problem with how muse responsiveness functions?

    I have seen some examples of websites with images readjust width and height and the distance of the bottom of page readjusts with it.

    Would love some help with this as it is really an issue in all my designs. Thanks a lot.
     
  2. Jeremei

    Jeremei Well-Known Member

    745
    97
    Ahmed!
    Very difficult to give you exact fixing hints without seeing exactly the issue! But there are two hints here.
    1) You can try to group items
    2) You can try to paste items into state button (copy items and paste them inside state button)
    :)
     
  3. Ahmed El-Alfy

    Ahmed El-Alfy Member

    9
    0
    Hi Jeremei

    What i mean is the gap between the bottom of the page and the responsive image. For example, if i put one image only in the page that is responsive, when i resize my browser that gap between the bottom of the image and the bottom of the page widens. So the question is: how to to maintain the bottom of the page distance.
     
  4. Ahmed El-Alfy

    Ahmed El-Alfy Member

    9
    0
    Here are two snapshots before and after to show you what i mean.

    Screen Shot 2017-05-16 at 19.45.21.png Screen Shot 2017-05-16 at 19.46.03.png

    You can see the gap has widened greatly after resizing the browser.
     
  5. Jeremei

    Jeremei Well-Known Member

    745
    97
    Ahmed!
    Ok, I understand what do you mean.
    1) Go to site properties and set the minimum height e.g. 500 px.
    2) Go on every page to page properties and set the minimum height e.g. 500 px.

    Of course there will be a white gap in 320 px if you have only one little image (responsive widht & height) on a page but on the real site / page there are many other objects (images, text, etc.) so the footer prevents white gab because you have put minimum height e.g. 500 px on each page. I hope that this helps? :)
     
    Ahmed El-Alfy likes this.
  6. Ahmed El-Alfy

    Ahmed El-Alfy Member

    9
    0
    Perfect. Thanks a million and it worked beautifully. Also realised that i had sticky footer on. So ticked it off just in case. Now it's time to remove all the un necessary breakpoints i have created because of this issue!
     

Share This Page