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.
Related
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;
}
}
A simple page which I've designed with bootstrap framework stops becoming responsive once the screen width is below 482px? The only thing i can spot is that it stops adjusting elements once the screen reaches the width of the form input fields plus an equal amount of padding either side, thus i suspect that the issue is somehow related to the form input field width settings, but I am unsure. Can anyone help please? I have read the documentation yet i am none the wiser regarding a solution.
Here's my bootply: http://www.bootply.com/DLxLacH4Jy#
Bootstrap has the following breakpoints
#media (max-width: 767px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1200px) {}
So if you want to apply some specific styles for screens smaller then 482px
all you have to do is to write class like
#media (max-width: 482px) {
.class-to-center {
display: block;
margin-right: auto;
margin-left: auto;
}
}
The solution to the specific problem I was having in my example was that i had over complicated the form with bootstrap grid classes for screen size formats, e.g. .col-xs-4 /col-md-6 etc, this had disrupted the inline form display and in trying to override this, not quite understanding what was negating the inline display, I used a width class to set a width of the inline form, this was stopping the responsiveness below the set width of the inline form elements.
Cleaned and corrected code here; http://www.bootply.com/DLxLacH4Jy
I've taken the liberty of adding this as my own answer to the question, as it does represent the solution to the exact problem i was trying to solve, however both Yuyokk & Joe Conlin's comments above were directly relevant and helpful also, if not the precise solution to my problem.
I seem to have run into a snag while working on a site.
What I'm trying to do is display certain sized ads only on certain devices (small ads = mobile, large ads = desktop, ect...) and make them display:none on all other devices outside of a certain pixel range.
So far everything is looking good; I've setup all the css classes like so:
#media screen and (min-width: 601px) and (max-width: 799px) {
.site-main {
margin: 0;
}
#secondary {
clear: both;
float: none;
width: auto;
display: none;
}
.tablet-only-ad {
display:none !important;
}
}
Everything works fine up until I get into the actual ad div... The current div is setup like this:
<div id="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">
<script>
ad script blah blah blah
</script>
</div>
I've tried copying all of the IDs into a class only, tried putting both class and id, spell checked, everything... Any help is greatly appreciated, thanks!
For starters, you have your ad inside an ID, so to show/hide this, in your CSS you need to target an ID, not a class, i.e.
#media screen and (min-width: 601px) and (max-width: 799px) {
....
#tablet-only-ad { /* note ID not a class */
display:none !important;
}
}
<div class="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">
note: class not id!
class attribute can support multiple values separated white space, and you can reference a class in css file whit a dot (es: .small-desktop-only-ad)
id normaly is a unique value es: id="secondary" and can be referenced in css with #id (es: #secondary)
Thanks for the help guys, I figured it out. I believe it was a mixture of space errors and a misunderstanding of the class/div difference. After shortening the class names and a small bit of testing I can confirm that the proper ads are displaying correctly on every device.
For reference to others:
Check your class names and shorten them if possible to prevent spelling or space errors.
You can only have 1 ID on a page, but multiple classes. I needed to change the ID to CLASS to get multiple classes to work.
Here is an example of one of the completed divs:
<div class="desktop small-desktop large-phone phone">
<script>
AD SCRIPT
</script>
</div>
Note, each class (desktop, small-desktop, large-phone, phone) all have display: none; in the css under their designated #media sizes which means they wont display once included in a divs class if the media size doesn't meet the requirements. There are 5 total classes (desktop, small-desktop, tablet, large-phone, phone) all with different size parameters and by taking away "tablet" the ad specifically picked out for tablets now shows ONLY on tablets since the device size requirement has also been met.
The explanation may be a little confusing since I just relearned all the class/id stuff this morning, but hopefully it'll help out :)
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'm working on this site:
http://stephaniebertha.com/indev/solartrak/
And I seem to be having a problem with breakpoints and general width responding to the layout. When you resize it and it starts to get down to 780 width, the layout breaks and it looks weird (the menu goes to a light gray color).
These are my media queries in custom.css (and in this order):
max-width: 480px
min-width: 481px
min-width: 769px
Is this correct? Should I be doing them in this order? Any help you can throw my way would be helpful. Thank you!
I think you need to reorganize your css thinking better the rules which ones you want for all devices sizes and which ones you don't
Example
in your custom.css you have this rule
#media only screen and (min-width: 769px) {
.navbar-default {
background: none;
border: 0 !important;
}
header.main {
height: 42px;
background: #f7941d;
}
the color of the nav bar shoul not be inside a #media rule thats why your nav get grey is smaller screens
and also read the documentation of the bootstrap grid it will help you a lot
Breakpoints for Bootstrap 3 can be customized here:
http://getbootstrap.com/customize/
Under the headings 'Media queries breakpoints' and 'Layout and grid system'... It's a good idea to use a custom version so that you're choosing which files are relevant to you, and are compiling your own custom build of Bootstrap.
You can look inside your bootstrap.css file to find out where the breakpoints are set. If you use the same ones in your stylesheet the breaks should match up!
// Your link isn't live any more so I'm afraid I can't answer questions about that.