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
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Hello my image inside css code is not responding on code, you can see on the screen vh=10 but screen is on full size.enter image description here
First Wrap img with div and give image width and height and then try fixing size to div.
Try to define at least width and height, even if you're putting an "auto" on one of these. Also, try object-fit propreties if your image is in a separated tag, or background-size and background-position propreties if you want to keep it as your background.
Hope it'll help !
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'm new to media queries and I have a question.
I made a Desktop version of the website first and now I decided to make responsive too.
I've read that in this case I shall use max-width but I'm not sure.
Could you tell me if I'm wrong?
max-width in a media query means the following:
All styles applied in that media query will run as long as 'screen' is below the max width, for example, max-width: 1200px, all CSS will be applied under 1200px.
Min-width is the opposite, all CSS wil run as long as 'screen' is above the min-width, for example, min-width: 1200px, all CSS will be applied above 1200px.
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 7 years ago.
Improve this question
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?
You have a negative margin on #page-header of -16px which is pulling the links back up...
Float your logo to force margin-bottom to work or use padding-bottom instead.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'll tell you what I would do
I have to create a simple div with width: 100%
Inside I put text centered (vertically and horizontally)
I would like the text inside the div auto-amended the font size according to the size of the div
I hope I was clear
Thanks to all
Similar things have been asked around here. I myself had needed that once, and found no way of doing that accuarately with CSS only.
I ended up having a Javascript function that took each div and an inner paragraph with a predetermined font-size and reduced its font size until the paragraph had less width and height than its parent div.
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 :)