I've created a pretty simple webpage using Bootstrap 5 and I'm broadly happy with how it looks. However, all the body elements are simply too large.
Elements too large
Notice that the elements at the bottom are being cut off. I'd like the entire page to be viewable on a typical 1080p computer screen, here's an example (manually zooming out on the browser).
More what I'm looking for
Is there an ideal way of sizing everything down?
I've looked over the Bootstrap docs and didn't find and didn't find an answer, but I have about a week's experience with it so I'm sure I'm missing something.
Try reducing the body default font-size and form elements line heights and padding.
Since, bootstrap v5 comes with bigger font-size defaulting at 16px. But under special cases (like your scenario) we need to touch down the below properties.
font-size
padding
line-height.
Reduce the above properties and try to fit your site properly for width 1080px.
You can even take the help of media-queries. For example,
focusing only on width-1080px
#media (width: 1080px) {
body {background-color: red !important}
}
focusing on width 1080px and less
#media (max-width: 1080px) {
body {background-color: red !important}
}
focusing on width 1080px and more
#media (min-width: 1080px) {
body {background-color: red !important}
}
Related
My Website Link.
My problem is,
Latest News section in my website(above footer), is not displayed properly in the mobile view.
The contents are very small, very difficult for the user to read it.
Can anyone suggest me any method or some correction in CSS, so that the contents are clearly visible.
Thank you.
Place this after the camera.css is initialized.
#media screen and (max-width: 480px){
#camera_wrap_448 .camera_caption > div div.camera_caption_desc {
font-size:3em !important;
}
}
Try to use VW instead of PX on both your height and font-size.
I also notice that there is a responsive problem in your "Product Portfolio when on 1199px upto 481px screen viewport.
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
To put it simply, when decreasing the size of your browser window, for mobile device view, the top buttons get pushed to the left, underneath the clients name and finally ends up in a Menu subfolder. Not being a web designer, although I am trying hard to learn, what I would like to see is the Menu subfolder react a lot sooner, before the button end up under the clients name. Being a free template of which I am trying to redesign, I looked under style.css and responsive.css but I'm not sure what I should be looking for. Any help with this matter would be very much appreciated.
http://landonmusicgroup.com/victoria_update_test/index.html
Thank you!
I would suggest smaller icons in general with less padding on the left and ride sides. This will create smaller icons that are closer together. You would likely have to scale the browser to ensure that the icons all fit before the media queries break to a single menu button at 767px.
The more efficient option would be to adjust the icons size and the logo size depending on the media query. For example, you have a media query in that template from around 980px to 1300px. If possible, in your template adjust the logo sizing and icon sizing to make sure that within that range, everything fits.
If you like the bigger icons, that is okay, you just must make sure that the bigger sized icons and logo do not take effect until after the window is over 1300px. Anything between 980px and 1300px is going to require smaller icons, smaller logotype, or a new arrangement altogether to avoid the line break.
Media queries are used like so:
//This section affects anything bigger than 480px
#media screen and (min-width: 480px) {
body {
//insert width and height
}
}
//This section affects anything bigger than 767px
#media screen and (min-width: 767px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 980px
#media screen and (min-width: 980px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 1300px
#media screen and (min-width: 1300px) {
li {
//insert width and height
}
}
I am really desperate about DIV elements positioning bug when trying to create a template for a new responsive layout web design.
The URL is: http://cs.renault-club.cz/responsive_005_bug.php
The problem: when you resize the window to be less than 800px, the "sidebar_right" (online users) DIV element displays not directly under the "obsah" (content) DIV, but bounced under the "sidebar_left" (menu) DIV element.
Please HELP! I spent already 2 hours trying anything, but without any success :(
In less than 500px it works fine, as well bigger than 800px. The current window width is displaying on the top left corner.
You have a 2 media queries causing it to push down: if you remove this
#media screen and (max-width: 800px)
#obsah {
width: 80%;
}
and also remove this
#media screen and (max-width: 800px)
#sidebar_right {
width: 50%;
}
it will work as you see below:
well, between 500 and 800px #sidebar_right has a with of 50% - that's too much to fit right of the other elements (seems like this is defined inline, in the style tag at the top of that page)
that's not a bug. it is how the box model works. try:
#sidebar_left { float:left; }
I have a webpage with the following layout: http://jsfiddle.net/h9Nn3/6/ and it looks exactly like I want it to as long as the user's browser is wide enough (over 700px or so) but if it is thinner than that it starts to get all jumbled up and if the browser is only half the screen which somewhat normal then it looks terrible. What would the best way to fix this be?
I think the best thing would be if the items simply moved down as opposed to overlapping.
You can use min-width, as #anjunatl pointed out, or you can use CSS3 media queries.
They let you tweak the CSS for any resolution range you want:
body {
color: red;
}
#media screen and (max-width: 700px) {
body {
color: blue;
}
}
When the user's browser is less than 700px wide, the new CSS is put into effect and overrides the old CSS. You can use this to your advantage and basically fix any bugs you find with the website by adding new rules into the media query block. That way, they only show up and fix the layout at the right resolution.
Add this CSS to the body tag: min-width: 700px;