When I open "inspect element" in right side of page it begins to small down, and whole style is out...
How can I stop it? Make it to become scrollable?
I tried adding to css:
html{
overflow: scroll;
}
But it didn't work...
You got any ideas?
You'll typically get a scroll bar when elements are fixed in size. Meaning they have a fixed width. Set your elements to a pixel value instead of percentages. Stackoverflow for example stays in place when i open the chrome inspector.
Note that this is very counter intuitive to that of responsive design. Your site should change size, and adapt to that of the screen.
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.