Child div jumping from one div to another - html

I am working on a site here:
My Site
The issue I am having is when you shrink the window or view the site on a mobile device the images jump from the div container they are in, (the div id="client") into the widget div below it.
I do not know how to solve this issue and am having a hard time finding the html for the widgets in all the different .php files I have.
I am working on wordpress from a template that I have edited.
I am not sure if this is just a simple css problem or if code if conflicting each other.
If you need more information please let me know. I wasn't sure if posting any code would help.

I figured it out, all I needed to do is edit the parent div css and add
overflow:hidden

Related

Centering a button in an iframe

Quick question here on a button that is inside an iframe. I'm attaching a screenshot to make it clear, but basically, the orange button at the bottom of this iframe for some reason does not center. I'm playing around in developer tools and I've noticed that there is a table data that seems to be in the way, but I can't figure out how to adjust it. Maybe you guys can help me with this one!
You can see the iframe here: https://sandrelle.ie/book-online/
Add text-align:center to your containing button div
so it turns out I was able to fix it myself. The issue originally was that it was formatted in a way that table data was getting in the way and pushing the button to the side, so I had just deleted the extra td that was in there.

Navigation bar hiding web page contents and sidebar contents in html

I'm making a web page to try to learn HTML, CSS, PHP, and Javascript better. I've been revisiting the code trying to work out a few bugs and I discovered that my search bar is hiding the page contents and a button on my sidebar. I spent about 10 to 11 hours this week to try to fix the problem. The thing is though I'm not sure what the problem is and so I don't know which part of my code to post. All I need help with is identifying a few possible problems. If you have an idea what the problem might be I would really appreciate your help. So far none of my ideas have worked.
Here is a picture of what the page currently looks like.
Can you try adding a css property of padding-top: 100px; to the content under the header and see if that does anything?
from the diagram it looks as if your search bar has been removed from the normal document flow. This is usually done in CSS setting the position attribute to absolute or fixed rather than static or relative.
Check your styling for position and set it to static or relative.

Page loads with layout pushed up

When my pages load, it's as if the content is pushed up and then when loaded it pushes back down.
It makes my website feel clunky. I'm stuggling to figure out how to make it stay where it is while loading.
Can anyone help?
Thank you
http://www.customlogoshop.com/logo-design
The problem lies with the script you are using to make the header sticky. It is having to wait for the page to render so that it can get the height of the element with a class of '.top-bar-container' and append it to the element with the class of '.sticky-container' element.
I would suggest either finding a different plugin or see this other stackoverflow question for a simple implementation of a fixed header: position-fixed-header

CSS conflict bootstrap

I'm making a website for an event, then I've added a countdown to it, but my footer and the button above it, are behaving differently in the page where the countdown is present.
I've come up with this:
the countdown is good as far as it's connected to a Bootstrap CSS;
That Bootstrap CSS makes my footer and button change aspect;
My question is: how do I make the countdown stay and work with the footer and button aspect unchanged?
This is the page of the website which doesn't work: http://goo.gl/mH9nLh
And this is the one which works:
http://goo.gl/24SZxQ
I'm not linking you the code 'cause I don't know where the error is, this way you'll be able to see each part of code and mostly: what should I take from that Bootstrap css file or some other tricks to get around the problem.
If you need anything please don't ignore this question, rather leave a comment I'll text back instantly!
I checked the 2 links you pasted above.
There is a main.css file which is included in the second link , which has styles for the table and it's subsequent child classes.
The same is not available in the first link and this is the reason you are seeing 2 different styles.
Please include the same set of css files in both the pages so that I can better debug the possible problem areas.

Keep website from adjusting to window-size

I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!