I'm creating a website and it's not fully response - I accept it.
I want to set minimum width for overall page to something like 1000px and display horizontal scrollbar if screen width is below this. I tried to use:
#media (max-width: 1000px) {
body {
min-width: 1000px !important;
}
}
But it's not working, scrollbar appears but my DIVs getting messed. I'm using Bootstrap 4 with sass, is there any way to force this behavior?
Of course, I'll create fully responsive site later, but now I want to archieve this for mobile and tablets. Currently, my navbar under 1000px is totally broken.
EDIT: Example codepen with my navbar code, under 992px it gets broken: https://codepen.io/anon/pen/vJgGma
The elements in your nav always hit 100% width below 992px so they're going to wrap no matter what you do.
You need to define widths for your nav elements below 992 if you want it to stay at 1000px wide. Try setting them to percentages that equal 100% and you should be fine.
Related
I made a small website where width of certain elements are given in vw. It looked all good in my laptop. But when viewed in a 1920 screen, I could see the content is over stretched. I want to know if there is a way to stop viewport width and viewport paddings I have used in my website to stop stretching the elements after a while.
You can achieve this by setting max-width: value to your container in you css file
Also to set diverent styles after certain screen width you can yuse media query
#media(min-width: 1000px){
//your style
}
I'm working on a Wordpress site where I have a background image that serves as my logo and my actual header image is transparent. Due to the way the header image resizes on mobile, there is a big empty space between my logo (the background image) and everything below it when viewed on a phone. It looks great on desktop & a tablet.
Is there a way that I can resize the height of that transparent header image only on a phone, without messing up the size of it on desktop or tablet?
You can view my site here, if needed.
Would be easier to show in actual code but you can adjust the sizes and only make it impact the sizes you define with media queries - read more about here
If you look at the screenshot, you can see that the a tag had a height of 150px. If you regulate it a bit, the space between logo and menu won't be as far.
Here is an example that will make the new change of height on the .header-image .site-title a only on sizes less that 450px.
#media screen and (max-width: 450px) {
.header-image .site-title a {
height: 100px;
}
}
max-width means when ever the screen is under 450px, min-width would be over.
This was just an example, you can change it to whatever you prefer and you can of course add multiple media queries.
Site URL: http://www.digisalud.org/desarrollo/dona/
Hello!
Please, I am using DIVI Theme and I need to make these settings in the navigation bar:
NAVIGATION BAR:
The PLATFORM button on some laptop screens is shown on the down line of the navigation in screen with size between 1056 and 1346 px.
When you place the cursor on the DONA button or on the PLATFORM button near its corners, the text is shown in white, this should appear in yellow or blue.
I show you the images with the sample of each problem. This site is already in production and I need to close these details with the client. I appreciate the help very much.
Regards
Adriana
At 1280px, for example, there isn't space enough to put all the elements into the same row.
If you inspect all the element's width, you'll see that the menu container must have, at least, 1030px of width to keep all the elements inline.
Obviously, like your menu container width is setted to 80%, when the screens size is, for example, of 1280px, the menu container have a width of 1024px (that, like I said, is not enough).
One solution can be to force the container to cover the entire width in those resolutions.
You can approach this using media queries.
Something like this:
#media(min-width: 1024px) and (max-width: 1366px) {
.container.et_menu_container {
width: 100%;
}
}
Snapshot with the Plataforma button hovered:
P.S: You can also adjust the paddings/margins of the menu elements (logo, menu items, buttons...)
I'm using wordpress on this site
If you try to resize your browser bit by bit, it has some big spaces that can be filled by the next image. I tried editing the width, but it doesn't work. Any other ideas how to fix it?
Here's a quick image of my problem:
You need to change the padding for each div that the images are in. Currently, it's set to 15px. If you set it to a percentage, it would become more responsive.
Alternatively, you could (if you're not already), use media-queries to eliminate the padding under a certain viewport. Something like this:
#media screen and (max-width: 660px) {
div .insert-class-here {padding: 0;}
I've adapted some CSS to use in a website and can't quite figure out why one aspect of the page is acting the way that it is acting. Basically, when I shrink my window below a certain size horizontally, all of the text "drops down". This becomes an issue if a user is viewing my website through an ipad with vertical orientation. You can view this issue here. I'm hoping to make it so that even if the window gets smaller, the placement of my text remains intact.
The problem is that the area does not have enough space to put both the side navigation and content on one line. Make it automatically adjust the page's width when it exceeds certain decrements of width. This code is an example, and it is highly unlikely for it to work. If I could see the CSS more clearly, then I could provide the exact code.
#media all and (max-width:960px) { /* Assuming the #wrapper is 960px across */
#content {width:560px;} /* As opposed to 720px */
}
Edit
The content drops down at exactly 980px, so you have to shrink the width after there.
#media all and (max-width:980px) {
#container {width:520px;}
}
div#content "drops down" because is set to be float:right which means when you resize the browser the content div to going to be moved with the flow of the page as it gets narrower.
try styling div#wrapper as white-space:nowrap and div#nav_left and div#content both white-space:normal