Best Answer

Footer overlapping widget

J
Rank
Badge

Hello everyone,

 

I am organising one of the pages I am working on by using CSS. The problem comes since the footer stands in the middle of the page after doing some changes. It is actually quite weird because it is behind the calendar widget but on top of a catalog widget. I have tried to use the code that you can find below but the footer remains still there:

/*Code to put the footer at the bottom of the page*/

#doc-page-32 div.doc-layout-common-footer {

  position: fixed;

  bottom: -500

}

Has anyone had a similar problem? You can see a pic below:

Thank you all in advance for your help.

 

icon

Best answer by gstager 8 July 2022, 13:59

View original

8 replies

gstager
Rank
Userlevel 7
Badge +5

Hmm… I guess my first inclination would be to say that your div/container structure is not properly nested or responsive.

I suppose it could be as simple as a bracket out of place but it is hard to tell without the code to look at.

Are you crafting an entire page or just trying to tweak by adding a little code?

What code did you add?

Perhaps if you can pull out your code and get to a place where it looks and responds correctly, you can add smaller pieces of your code back in a little bit at a time to see when it breaks. That could narrow down the part with the issue.

Greg
J
Rank
Badge

@gstager Thank you for your reply. I added two rows at the top (HTML). The problem came when I added more widgets (catalogs and custom boxes) because they overlapped with the previous rows. 

I managed to organized them with CSS but it happened the same with the footer and I am not able to solve that. You can see the code I have use below:

HTML

<div class="contenedor">
  <img src="url of the picture" alt="car_picture_3.png" width="1390" /><div class="text-one">Description</div><div class="text-two">Description.</div>
</div>

CSS

#doc-page-32 div.contenedor{

  position: absolute;

  display: inline-block;

  text-align: center

   }

 #doc-page-32 div.text-one {  

  position: absolute;

  bottom: 150px;

  left: 5px;

  color:white;

  font-size: 34

}

 #doc-page-32 div.text-two{

  position: absolute;

  top: 70%;

  left: 0.5%;

  transform: translate (-50%, -50%);

  color: white;

  font-size: 25

}

gstager
Rank
Userlevel 7
Badge +5

I am still not 100% sure about what is going on here so forgive me as I seek clarification of details.

Are you trying to create your own custom widgets? or are you using the HTML/WYSIWYG widget and adding your HTML there? How are you combining the custom widgets with the others?

You’ve got a lot of absolute positioning going on there and I think that will ruin any responsiveness you would like to have - especially if you then mix some standard widgets in.

Greg
gstager
Rank
Userlevel 7
Badge +5

Try just making this one adjustment and see what happens.

You’ll need to change your page number back to 32

Greg
J
Rank
Badge

@gstager I am using the HTML/WYSIWYG  widget and adding the code there (for the first two widget on the first row). On a second row I have added catalog widgets and custom box widgets.

I have tried to apply the change suggested above but the footer is still on the middle of the page and the first HTML widget does not fit properly now and comes with a scroll bar…. 

gstager
Rank
Userlevel 7
Badge +5

OK

I am trying to re-create what you have there in order to find the culprit code.

I added your CSS to my branding area and made an HTML/WYSIWYG widget and only placed the HTML there. I swapped your image URL for a placeholder image.

This was the result.

Before: You can see my catalog appearing over the top

 

This is after changing the top block of code to relative as suggested. The catalog adjusts.

 

So I do see an improvement.

Your width for the image is 1390 in the HTML - that seems wide. and fixed

What if you try doing width=”100%” and see if that allows better results?

Thanks for your patience - it is challenging without the whole picture. No pun intended.

There are more pieces to the puzzle that I am missing.

Greg
J
Rank
Badge

hi @gstager you were right, the problem was solved by adjusting the position from absolute to relative in most of the cases, now it is looking ok. Thanks very much for your help 😀

gstager
Rank
Userlevel 7
Badge +5

@JavierPuertas - Great news!

Thanks for the update.

Greg

Reply


Terms & ConditionsCookie settings