I am building a site that uses a very large header image. When the site is viewed on mobile I would like to scale that header div's height to be half of what is is on desktop.
What is the best way to do this with bootstrap 3?
A simple media query will work:
#media all and (max-width: 480px) { // or whatever size you want to target
// change header size
}
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.
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.
If you use a meta viewport tag as below to tell a mobile browser to scale its content as if its being viewed on a 1200px wide display (the actual width of the browser in question is 500px)
<meta name="viewport" content="width=1200px;" />
and then also use a media query like
#media only screen
and (max-width : 1200px) { /* NEW CSS */ }
Which would get used? As with out the viewport tag the media query = true, so the new css should be used, but the viewport is saying the device is 1200px.
NOTE: im using max-width which equates to the browser window width, rather than max-device-width which equates to the device width
My project needs me to create website with 1024px fixed width. How can I use Twitter Bootstrap which uses 960px fixed width method to adjust to 1024px width.
Is there any downsides of having 1024px width websites?
You can create .container class and assign it width of 1024px .
.container{
width:1024px;
}
and you will have to rewrite classes according to it .
Downsize can be with small monitors there can be a scrollbar in browsers.Suppose you create your pages at 1024×768, they will not fit into the screen of a visitor that has set his/her resolution to 800×600.
But usually these days people have bigger screen with good resolution , so you go with the 1024px size .
You can actually customize Twitter Bootstrap using the Customization form. Else, you can set the CSS here:
.container{
width: 1024px;
}