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
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 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 6 years ago.
Improve this question
I am always confused which one I should choose whether margin or position(relative, absolute) in making a web page responsive.
For example , I have an HTML element , now to align it properly, I can go for either margin/padding or Position, but I always think that which will be better to use so that I don't have to write lot of media queries for different devices .
Any help/advice is aprreciable !!!
Each property has their own usecase. but in responsive perspective
i feel padding would help more like in some case you simply give padding instead of element height and width.
Position/margin relative/abs is completely depends on requirement.
after that you can use % and em as well.
for me, position absolute and using top left or etc is troublesome, especially you will do the floating things between 2 div/section like my post here:
The never answered question
same does with margin and padding, you should know your own width and height divs, but it will too complicated when you turn into a responsive, you should set your width and height again.
the best thing to do responsive website i think you should follow the website structure. keep inside the wrap div or section.
in order to create the mobile view or responsive design you need the great media queries order, it help you to fit with a regular screen device like(iphone 5, 6 or ipad) but you have to consider that now market is in android. and android phone growing so fast and you can't learn what the resolution is(you won't update your media queries over time right?).
bootstrap
it typeless but it only 12 grid system which you can't manage a navigation with 7 menu, you should modify it by yourself.
flexbox
flexbox is good, you can maintain your container and you don't need to do using float and clear both.
like i said, it depends on your media queries. it's not about position or margin/padding, it's about everything in css.
if your question is only all about alignment, you can start using display flex with justify-content and align-items in parent div or section, this way you won't bother with what is your parent div's width and height.
cheers, might it help to understand :)
Position is not better for responsive design. It is useful but not recommended to use in place of margin/padding.
For example when you use position:absolute; on an element it takes that element out of normal content flow and adjusts its position only according to it's relative positioned parent element. If you use it too often, it is gonna create problems for you.
And responsive design is about using float
In short position is not to be substituted formargin/padding.
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
I'm trying to reach the following result:
I need left col-md-3 to stay always 100% height and always on screen - it's a menu.
The right side is as usual with scrolling available etc.
Thanks in advance!
Using bootstrap in this situation may not be your best solution. I love bootstrap however you don't need to use it for everything and this may be the case here, however I'm sure you could make that work.
Draw your page layout as you see it working and see if your idea of a sidebar suits the bootstrap 'grid'. Does it make sense to have all of your content wrapped in a row that is 100% the height of the screen?
Really it sound like what you want is a sidebar div with with absolute positioning set to 100% screen height. To make it responsive just create some css media queries to handle that.
Your content div on the right you can build up with bootstrap as you like.
Here's a link to a similar problem with an answer:
Creating a fixed sidebar alongside a centered Bootstrap 3 grid
Hope it helps!
Bootstrap has a plugin called Affix which can be used to accomplish what you're looking to do.
But, generally speaking you can use position:fixed for this and don't need to use Bootstrap at all.
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 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 :)