Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a widget in my wordpress site that displays last 10 posts. The whole display image+title with 10 posts make the widget looks huge. I was thinking if its easy/possible to display only a specific size for example 300 pixels and have a small scrollbar on the right to see the rest content.
Example
#recent-posts-widget {
height: 300px;
overflow: scroll;
}
Above is the most simple way to achieve this (replace #recent-posts-widget in your CSS with the selector of the widget container on your site). Need to see the relevant HTML markup and CSS to give you more specific instruction.
That will produce a "default" scrollbar like you see at the side of the browser window. If you want something less ugly that you can style further to be like your site, look into using jScrollPane which allows for much more beautiful scrollbars and has great cross-browser compatibility.
You'd need to set max-height:300px and overflow:scroll of the specific widget (each widget has it's own class/id, set this inside your style.css).
This should give you a vertical scrollbar if the widget is bigger than 300px.
Hope this helps :)
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a question:
How to make a responsive design that when I resize the window the design not change at all(width, height, positions), only the window cover the design/content.
For example this website: https://www.zap.co.il/
How can I dot it if all elements are viewports and almost every element positioned absolutely to the body tag ?
For the viewports I can use SVG - It solving it, but the position ?
I want everything remain the same, thank for your help
this should make your page basically responsive
then for resizing components at different widths
`<meta charset="utf-8">` html code
#media screen and (min-width:800px){
//css code for screen widths above 800pixels
}
css code
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
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I hope someone can help me with this, I've been searching in my CSS whats wrong but can't figure it out.
If you look at this website: http://viversa.nl/v2/index.html , and click a bit threw the pages, you'll notice some jumping between sites. You'll notice it specially if you click from 'Projecten' to 'People' and back.
It seems "HOME" and "PROJECTEN" are the same, with both a good layout. Next to "OVER ONS", "PEOPLE", "CONTACT" and "SITEMAP" which have a good layout together aswell. But I can't figure out whats wrong and how its possible its jumping, since I simple copied the menu + logo pages + css.
Hope someone can help me out with this!
Thanks!
Sincerely, Stefan
The problem is that the project-page is longer than the screen, thus causing the vertical scroll-bar to appear. Since you are centering the layout and the scroll-bar takes up 20px or so of the space used for your site, what is considered as the center will "move" slightly when the scroll-bar appears.
To get rid of the jumping, you can force the vertical scroll-bar to always be visible:
html {
overflow-y: scroll;
}
The difference is the browser scrollbar. Short pages that don't require scrolling have a slightly wider space available to them compared to longer pages that can be scrolled.
Seems like you got too much text for your images that are only 410px in Height, maybe delete some text or make your background images longer and added some min-height into the CSS?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've searched, but can't find a good answer.
I need to place some controls, namely a textbox and two buttons, on top of an image.
The image is set to 100% of the page width, with the height being automatically adjusted by the browser.
The controls need to align with exact positions of the image and be sized in relation as well.
You can see the image I'm talking about here. I think the placement is self explanatory.
I can live without the control sizing if need be, but really do need the positioning.
Thanks
You can use a combination of position:fixed or position:absolute with #media queries for the input and button's width. So while your image resizes, your controls keep the same position. For example, position:absolute; left:10%; top:20%;.
Having said that, there's really no point in having a giant image when you could save loading time and have something that is actually usable by creating a responsive design. As it is now, that image is impossible to read in a phone, plus, your inputs would become tiny!
#media queries will allow you to have different styles for different screen resolutions (and pixel densities). In your case, you could have your current layout for desktop, and start moving elements one under the other for iPad and smaller mobiles. So for smartphones, for example, you could have the elements in this layout (320px width):
logo
menu
video / picture
login / signup buttons
footer 1
footer 2
footer 3
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.