In general, I want my body div to be 60% width of the window size. But there are some exceptions.
On a large monitor, this gets too big, so I have set a max-width of 800px, like so:
#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}
This works pretty good, the text adjusts within a certain range, but at certain max threshold holds it shape.
Now I want to do something similar for small window sizes.
I've added 'min-width: 300px;' and this seems generally seems to override the width 60%, However, if the screen size is less than 300px, the user will have to scroll horizontally to see part of the text.
I would prefer for the actual width size to change 90% or 100% after the viewer size hits the 300px threshold.
Any ideas on how I could do this?
You can use a media query to achieve this: JS Fiddle Example
#media only screen and (max-width: 300px) {
#lbp-text-body {
// Whatever Styles you want to have at 300px or less
}
}
You can also use media-queries to have specific styles if the window is greater than a specific width using min-width.
#media only screen and (min-width: 800px) {
#lbp-text-body {
// Whatever Styles you want to have at 800px or more
}
}
As a side note, you will want to be sure you have the correct viewport meta tag for media queries to work properly on each device: Viewport Meta Tag
I woul use a media query to determine the size of the screen, and change the % width based on that:
#media (max-width: 300px) {
width: 90%;
}
The browser will read through your existing CSS and apply the styles you described in your question. The media query tells the browser to apply this new width to any screens that fit the criteria - a screen that is at most 300px wide. If you have other breakpoints (in this case, widths) that you would like to target, you can definitely use more than one media query at a time.
See: detect browser size and apply css for every resolution
also: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Related
I'm using Bootstrap 4 and noticing that I'm losing precious horizontal real estate at every breakpoint. I'd like for the outermost container to be 100% wide any time the browser is < 1200px.
I added this to my CSS:
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: 1140px;
}
}
I used 1140px as the width because that's what the documentation said the max width of an element with .contianer can be.
You can see it here.
When I resize the browser, everything adjusts as I intended, but is this just a case of getting lucky and that changing the width from Bootstrap's core values totally jacks up the grid? Is here a "correct" way to do this using .container-fluid?
Here is the exact solution of your question: https://www.beyondjava.net/how-to-add-a-new-breakpoint-in-bootstrap
When you are using Bootstrap 4, you should use it's basic features like media-breakpoints.
In the bootstrap_config and _variables you can specify the point of each breakpoint at how wide the screen should be to trigger it.
NOTE: in this case, the lg stands for your own choise wich breakpoint you want to give the value 1200px
In this case if you config your boostrap to trigger the lg classes at 1200px, then if you add the following code, on every screen which is less wide than 1200px, the container class will be 100% in width.
#include media-breakpoint-down(lg){
.container{
width: 100%;
max-width: 1140px;
}
}
So you basically want your container to behave the same way as .container-fluid when your viewport is less than 1200px. I think Patrik's answer is the most correct way to do this (by modifying the source file), but if you don't want to do that, then I think your method is OK.
However, I think the CSS you are using in your ruleset could be revised. You could set the max-width property to none which is the default value for that property. This has the effect of unsetting whatever Bootstrap's CSS applies for this property.
#media (max-width: 1199px) {
body > .container {
width: 100%;
max-width: none;
}
}
MDN article showing none as the default value for max-width:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
I want to have header text that always takes ( for example) 80% of screen width and 80% of screen height.
the text should always remain in viewport and adjust it self on windows resize to take the defined viewport size.
I know that i can use(for example) font-size: 30vw to achieve my goal horizontally , but i want the text to adjust it self both vertically and horizontally.
an similiar example of my desired implementation is www.sels.de (the header text resizes itself to fit viewport horizontally and vertically).
A jquery plugin or pure css implementation is ok.
I also know that i can do it using width and height media queries , but it is know to be buggy(so , i am looking for a solution other than that)
The example you linked is just using an image for the text, so that will scale down properly.
Try using em units like font-size: 16em; otherwise I would just use media queries like so: (nothing buggy about it)
#media screen and (max-width: 1024px) {
.header-text {
font-size: 16px;
}
}
#media screen and (max-width: 768px) {
.header-text {
font-size: 14px;
}
}
This header looks like action of http://getbootstrap.com/components/#navbar
If you need something similar and don't have time to create, this is the best way.
Ok, if I'm understanding correctly it may be easier than I originally thought. Have you tried just setting the font-size: 80vh;?
See this fiddle fiddle
I have an image which I'd like to scale according to the following rules with increasing importance:
normally has a width of 38% (of the parent/screen);
not become smaller than 300px;
never become larger than 100% (of the parent/screen) (only an issue if the parent/screen is smaller than 300px;
That is to say: the image takes only a percentage of the available space but should not become too small on smaller screens. However, for very small screens (mobile devices), the image may never exceed the full width of the available space, even if this would mean it shrinks below the minimum width.
I thought I could do this with the following css:
img {
width: 38%;
min-width: 300px;
max-width: 100%;
}
thinking that the max-width would take preceedence over the min-width because it appears later. But it is not working... The image appears as the required percentage and is not shrinking below 300px. However, on a small screen (<300px), the image extends out of the screen (scrollbars appear).
Reading the docs, min-width overrides max-width, so I should have seen this coming...
One obvious solution would be to add a media query:
#media screen and (max-width: 300px) {
img {
min-width: 0;
width: 100%;
}
}
However, I would like to be able to override the width specifics (i.e. the 38% or the 300px values) from within the html (tag style).
Several questions on SO touch on the topic of sizing, but I could not find one about my exact case. Anyone here with a solution/suggestion?
Some side requirements:
should work in major browsers, html5/css3
no javascript (if it turns out that it's not possible with css only, I will create a js solution, but I prefer no js for this)
no media queries (see above)
I am in control of the html, so nesting inside additional elements is fine if needed
If min-width overrides max-width, then the solution is to not set min-width to a value that can become greater than the window width.
In other words, swap around the values for width and min-width. Then you won't need media queries or JavaScript.
img {
width:300px;
min-width:38%;
max-width:100%;
}
<p><img src="https://via.placeholder.com/999x333"/></p>
<p><img src="https://via.placeholder.com/999x333" style="width:400px"/></p>
In this example, both images are never smaller than 38% and never larger than 100% of the window, and the first image prefers 300px while the second one prefers 400px.
(Note that the images themselves say they are "999×333"; you should ignore that.)
I know that media queries are used to create responsive layouts.
However they seem redundant; can't we achieve all we need using %?
Defining layout using % help create a fluid layout, NOT RESPONSIVE layouts.
Media queries help you to define different style sets for different screen sizes.
Also with Media Queries, you don't have to be limited to just heights and weights, you can control more than sizes.
Example below creates different background for different screen sizes:
#media only screen and (min-width: 320px) {
body {
background: red;
}
}
#media only screen and (min-width: 780px) {
body {
background: blue;
}
}
Can % do that?
No
Percentage-based layouts are fluid-- the widths of their components can change as the viewport size changes. That does not make them responsive, however.
Responsive layouts have different CSS applied at different viewport sizes. For example, two blocks that each have 50% width and float next to each other when the viewport is large might change to have 100% width and stack on top of each other when the viewport is small.