I'm having a problem moving a panel slightly of the page like that:
enter image description here
I tried width: 120%
it does work but when I resize the image moves out of its original position, I'd like it to look similar on different screens, the panel is inside the bootstrap 4 container coz I use bootstrap 4
Pls help, thank you
Here's a quick pen that might help you. Codepen Link If you create a pen or share your code I'll take a look for you mines just a rough idea but might help you.
If you are trying to get the image off the right of the screen use margin-right: -???px but make sure you have overflow: hidden on the wrapper.
Without seeing any code to try and reproduce the problem on our end, I would assume that you need to set the width of the margin-left depending on the viewport. This means that with different viewports you need to adjust the margin accordingly.
Check this out based on device size.
/* For devices smaller than 400px: */
body {
left-margin: 100%;
}
/* For devices 400px and larger: */
#media only screen and (min-device-width: 400px) {
body {
left-margin: 50%;
}
}
Take a look at W3's Informative Series on responsive web design.
https://www.w3schools.com/css/css_rwd_intro.asp
Related
When I make my web page smaller the sidebar goes on top of the main content, how can I make it stay on the side
here is an example of what happens
In Bootstrap, you can use something similar to this. This is simply an example but it can be applied to help change this when the screen resizes.
#media screen and (max-width: 575px) {
font-size: 55px;
}
This means that when the screen has a max width of 575px, then the font-size would change to 55px. Without your code I can't give you a more exact answer but you can apply this concept to the issue you have. Hope this helps!
Im really struggling to articulate what im trying to achieve, please bear with me on this..
I've got a small "widget" on the left and side of my page.
This work fine on bigger screens.
For example, the widget is say 300px wide in the style.
However, If i load the page on a mobile or shrink the window, This becomes unfeasably small.
How do i get it to automatically change from 300px to full 100% width if a "smaller" viewspace is observed?
So say, i shrink my window , it would suddenly jump to be 100% wide rather than 300px? ( or similar)
Any ideas?
Sorry if I haven't explained it well enough. I've googled and nothing really sticks out that achieves what im doing.. maybe im not looking for the correct terms.. In a bit of a i dont know what i dont know to google it.
Cheers
What you're trying to say is "How can I make my website responsive?". You can do that with the CSS Media Queries. Check the link and google for more informations.
To give you an idea, just try this:
.my-class{
color: white;
background: black;
width: 300px;
}
#media (max-width: 600px) {
.my-class {
width: 100%;
}
}
<div class="my-class">
Some text!
<div/>
The break point here is at 600px, for large screens you have the width of the div is at 300px, for small screens you'll get the width taking 100%. (Try to resize the width of the current window while running the snippet to understand how it works).
edit: you can also use as the following style (the idea is in the min-width), if this is what you're looking for.
my-class{
width: 300px;
min-width: 100%; /* or 100vw depending on what you want */
}
Apparently,you are using the CSS-Unit "px". If you want to have a size relative to the screen, the units %, vw and vh would be useful.
% is relative to the parent element, which is probably the whole document, so you could work with that as a relative unit.
vh represents the percentage of the viewports heigth, so you could use it for the heigth of your widget
vw represents the percentage of the viewports width, so you could use it for the width of your widget
These were just some examples, if you want to learn more about the CSS Units, go to https://www.w3schools.com/CSSref/css_units.asp
I hope I could help you.
However, if you want to keep your px unit you can use the media query, as already mentioned by Il Saggio Vecchino. This allows you to have a different design at different devices.
Also take a look at https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.
Is it possible using only CSS or I have to use some javascript as well?
What I need is something like [this][1]
Any help or advice will be highly appriciated
Thanks
What you want to do is to Responsive Design
For example you can make your css target a particular devise as:
//General css
/*MEDIA BETWEEN 300 - 1000PX */
#media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
#media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
#media all and (min-width:300px) and (max-width:620px)
{
}
Some of the pages that can help are:
http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
NOTE: use em and % instead of px and pt
Just set relative widths on stuff, like width: 75%; or width: 60%; instead of width: 450px; or width: 650px;. This will work for you if you just need elements to get narrower/wider as the page is resized.
If you want major layout changes (like on the demo you provided, the top menu bar becomes a sidebar when the window becomes smaller), you'll need some Javascript to switch stylesheets based on the width of the window. Hope this gives you some ideas!
What you are talking about is called "Responsive Design".
A responsive site works more with percentages instead of pixels as well as something called "media-queries" in css.
There is a great article about it here:
http://www.alistapart.com/articles/responsive-web-design/