Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn't fix anything. I have attached the Image and Live demo of the project below.
Heroku Live demo
Hi,
this problem faced me and i have solution.
This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn't work
Mobile Ignore overflow on body tag
Try to make div and hold your page content and give him
overflow-x: hidden.
It will work
The problem is related to the markers added by some lib, maybe the one taking care of the animations.
If you remove them before changing to mobile view, the space on the right side disappears.
I had same problem and for me was hepful overflow-x: hidden
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have some rollover effects in a sticky footer and a responsive menu / nav that sticks to the top. When the nav is opened and is long enough to go over the footer it covers everything except the rollovers.
nav closed http://www.musictheorytutorials.com/navclosed.png
nav open http://www.musictheorytutorials.com/navopen.png
I have tried lots of changes, searched on here and then tried to rebuild a simple version in jsfiddle as an example of it not working and it worked! However making these changes to my actual page do not...
Here is the jsfiddle that does work: /m_d_a/y7Lj3rms/26/
Here is rge jsfiddle that doesn't: /m_d_a/4bLyt681/5/
I can't get the code tags to work properly when cutting and pasting in either, sorry.
I know there is a lot of javascript, most of which is cut and pasted from linked js plug-in files which I don't understand, so I think it's gonna be something in there. If anyone can trudge through this I would really appreciate it. I will also change the title of this question to reflect a working answer to help people in the future.
Thank you.
just modify this selector in your css
from
.menu {
position: relative;
z-indez: 100;
}
to
.menu {
z-index: 100 !important;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Here I made this page with jQuery - http://peterhay.com/Fluxx/people
It works fine in ANY browser or device beside Google Chrome..
first row of pictures work ok but any other row (second or third etc..) doesn't go up after jQuery "detail_block" div is getting "display: none" styling... please check the page with Google Chrome and see for yourself.
CLICK on any picture from the second or third row and click again for the "detail_block" get's "hidden" and the row below will not come up... if you click on any image of the FIRST row everything works correctly..
Can somebody please help me with this I can't understand what is wrong... and it works fine in any other browser...
Thank you
It appears the <br> tag you have inside of <div itemprop="articleBody"> is causing the issue in Chrome. It doesn't play nicely with your floated div's. I would recommend removing the <br> tag and using the clear property to clear the float.
.pages_highlight_box { clear: left; }
Removing the <br> solves the issue in Chrome.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I usually build my wordpress sites by using a theme and creating a child theme. Generally I have done this with Wordpress 2013, but this time decided to take a crack at it with 2014. I have run into a few issues but finally landed on one I have not been able to resolve.
http://demo.diocesan.com/robert/
On this page, it tells me the page has a height of 2000+ px. When I try to find where this height is computed, I find nothing. I have set the height on many different elements to 1000px (even the HTML tag itself) and I still have this mysterious height value.
I suspect this has something to do with the 2014 masonry script (Admittedly I am not great with javascript) and any direction on this would be helpful. So my question - Does anyone upon glancing at this know where the height is coming from and what steps I can take to remove it?
The problem is the CSS on #secondary - it has min-height: 100vh applied, which will make that one element at least one full viewport tall.
It's then hidden because the following element (#primary) which contains the content is given a float: left which makes it move up, so that it appears that the gap is beneath #primary, even though it's not.
Removing the min-height on #secondary, or setting it to a sensible value, will fix your problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
There's this really cool effect I'd like to recreate, however I don't understand how the developer is achieving it. I've looked at the source - but I still don't quite understand.
The site is: http://drewwilson.com and below will be a couple of screenshots of what is happening.
When I click on the ellipsis on the header, a little about element pops up and the actual site 'zooms' backwards, leaving whitespace around it's border and greys out.
I can't see any javascript or jQuery doing it, so i'm assuming it's css?! - Although I might have missed something totally - so any help is appreciated :)
Inactivated
Activated
I think the whole page is wrapped in a div which have a 100% height and 100% width. So you have a control over everything inside that element.
You can achieve that by using css3 transform: scale(value); and of course jQuery
see samples here
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
There is no custom css set for smaller resolutions. I am having a problem where if I load the webpage at a low enough resolution, click the contact box, I cannot enter any fields till I stretch the browser to a larger resolution. At this point I can edit the contact box and also go back to the mobile resolution and have it still be operable.
The only way to truly explain this would be for you guys to go to the temporary site I setup here. I have scanned the HTML code to see if I am missing a closed div or something, but this scenario is very odd to me, especially since it works at a full resolution.
Please let me know what I am missing, I have exercised all of the possibilities.
It seems to be a problem with the z-index of either the pop-up or the background/overlay that comes up with it. I pulled up the dev tools and set a high z-index on the pop-up and a low index on the overlay and that fixed it. However, the elements are reset each time you open the pop-up. That makes me think that the elements are generated each time rather than shown/hidden. Whatever the situation is, you'll need to add an appropriate z-index to either the css or the element's themselves (inline - not recommended) and possibly with an !important depending on what all is going on in the code.