I am currently using DIVI Builder to build a simple website.
I have a fullwidth section, with a full width slider inside. The text inside the slider seems to behave differently on desktop versus mobile, so I figured i can help that with #media. What i have done so far is to create a duplicate, identical slide, adjust the 2nd of the two for mobile and hide the 2nd from desktop users. While I don't exactly know, I assume that this way will eventually slow down the page loading speed, so I resorted to #media.
The issue preventing this from working is that the media inquiry starts with:
#media all and (max-width: 980px) {
XXX {
margin-top: 100px;
}
}
The XXX represents the unknown for me, because I want to target the whole column, in this case automatically labeled as .et_pb_slide_0. From what I understand i cannot replace the XXX with a class, or in other words, something that starts with a . Is there any way to make this work ??
Media queries can contain classes like .et_pb_slide_0 or .anything_you_like!
This is valid:
#media all and (max-width: 980px) {
.et_pb_slide_0 {
margin-top: 100px;
}
}
Related
Would someone mind assisting me with the CSS code I need to have these 4 boxes with the text resizing the boxes for mobile devices (phones)..
This is the website... http://westmetrofire.stg.colorado.gov/
Here's the code (and I apologize I don't know how to use the coding section here).. I think the issue is here (and I need to come up with another #media section that defines the phone screen size)...
#media (max-width: 950px) and (min-width: 450px) {
.box {
text-align: center;
height: 180px;
I've tried several different things and the images gets all skewed.
Thanks for any assistance. Jim
Hello Jim,
#media (max-width: 450px)
.box {
height: 500px;
}
I switched the .box height and was able to get the headings, paragraphs, and the images inside the boxes on what would be an iPhone 12 Pro display. This does however lead to some whitespace below since not all the elements inside each box are taking up the same space. I am also fairly new to CSS, however if this were me I would look into adding a class for each box so you can size them individually until everything fits. For example .box-red or .box-blue. These can then be added to the HTML elements and styled under that media query.
I'm almost certain there is an easier solution, but maybe this well help in the meantime.
I have a code for a bootstrap carousel I am deploying to a site. It works perfect on large devices but I wanted to add media queries to optimize it for mobile.
However, whenever I add a media query to the style sheet I get a runtime error and the site breaks.
I am using Umbraco and this the carousel is a partial view. When I add in even a blank query such as
#media screen and (max-width:480px) {
body {
color: red;
}
}
I get the runtime error, what could be problem?
Thank you
Since your CSS is within a tag in your view and you're using #media, you must escape the #, by adding an additional #. So change your code to
##media screen and (max-width:480px)
When using # the compiler thinks you're writing Razor code and it simply errors because it can't figure out what #media is supposed to be, since there's no variable defined with its name. I hope that makes sense.
If you change it to this does it work?
##media screen and (max-width:480px) {
body {
color: red;
}
}
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.
the method chosen was to use CSS media queries.
my problem is this: when I use the following code
#media screen
and (min-width: 200px)
and (max-width: 800px)
{
#example
{
background: purple;
}
}
this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.
perhaps more perculiarly, when I use the following code
#media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
#example
{
background: purple;
}
}
this has the inverse effect: displays on phone, but not on PC.
as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid
#media screen
and (
((min-width: 200px) and (max-width: 800px))
| / || / OR
((min-device-width: 200px) and (max-device-width: 800px))
)
{
#example
{
background: purple;
}
}
so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?
I have tried so many combinations:
using #media only screen,
using Android, Firefox and Chrome browsers on the phone,
but to no avail, the result is always the same.
The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.
I looked into using the orientation: landscape/portrait target, but as far as I can make out this would again involve writing two sets of CSS.
One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.
This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.
Try using a viewport meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Place that into the head section of your page.
Here is a live example.
For the big resolutions, it works fine - you will see the 'popular products' at the bottom all in one row.
But if you resize your window to say 800 x 600, and scroll down you will see all the thumbnails in 1 column.
How can I get that to be in 2 columns? Or does Bootstrap not support that?
i.e. I don't want to have to change any of the logic in the default CSS files - I just wanted to see if I was doing anything wrong.
Thanks.
I am afraid you cannot get two columns in the mobile version with pure Bootstrap. The default media queries rearrange any .spanX in one single column:
#media (max-width: 767px) {
...
[class*="span"] {
float: none;
width: 100%;
...
}
}
And nesting an .spanX within another .spanX doesn't work either. What you could do is to extend the default Bootstrap classes with an special version of .span2 for your purposes:
http://jsfiddle.net/LPsQy/
The new .my-span2 behaves as a regular .span2, but for the mobile media query works as a fluid .span6 (takes ~50% percent of the width).
I think it is not trivial to do it without changing Bootstrap's CSS on your own. If you cannot do it nice, here is the ugly solution:
Generated custom Bootstrap without responsive "Narrow tablets and below (<767px)" option. Lets call it Big.
Generated custom Bootstrap with only one media (I choosed "Tablets to desktops (767-979px)"). Lets call it Small.
In Small CSS I removed lines: #media (min-width: 768px) and (max-width: 979px) {, #media (max-width: 979px) {, and their closing brackets }. These are grid system and navbar.
Create your own CSS with following content:
Your new css/bootstrap.css
#media (max-width: 767px) {
... paste Small CSS here ...
}
#media (min-width: 768px) {
... paste Big CSS here ...
}
See example.
Note 1: It may still be not exactly what you want, because bellow 767px the grid system is fixed 2-columned and you may prefer fluid 2-column.
Note 2: Some more changes are required cor hidden-* and visible-* classes to work.
Note 3: You can take some time to diff the CSS files to see what really differs them.
Bootstrap was created to make easy solution to common problem. If your problem is not common, then the solution will not be easy ;) In your case you need to recreate your own CSS by selecting some parts of Bootstrap's...