I'm trying to create 3 different scenario's. Small screen, medium screens and large screens.
#media screen and (max-width: 400px) {
.message-large, .message-med { display: none; }
}
#media screen and (min-width: 401px) and (max-width: 1099px) {
.message-large, .message-small { display: none; }
}
#media screen and (min-width: 1100px) {
.message-small, .message-med { display: none; }
}
The way it works as coded above, large scenario works on large display. medium scenario works on medium display. medium scenario works on small display <-- there is where the problem occurs.
<img class="message-small" src="message-small.png" width="1100" height="392" alt="Hover over this image or click on it to receive a PRO-TIP.">
<p class="message-small">small</p>
<img class="message-med" src="message-med.png" width="1100" height="392" alt="Hover over this image or click on it to receive a PRO-TIP.">
<p class="message-med">medium</p>
<img class="message-large" src="message-large.png" width="1100" height="392" alt="Hover over this image or click on it to receive a PRO-TIP.">
<p class="message-large">large</p>
The p's are just to troubleshoot the issue. The img src width and height will be resized accordingly later on, haven't got that far yet.
Related
I have a less file containing a simple css class that needs to have different styles applied for various screen sizes. The following code only works on desktop (the first #desktop media query). Nothing happens for mobile. I have tried many variations of this syntax with no luck and haven't found anything about this in the docs. You can also see the live demo here (notice how if you stretch the screen wider than 1024px the div turns orange, but it does not turn red or green when smaller than 1024px as it should). Thanks.
html
<div class="derp">
Hello
</div>
less
#desktop-min-width: 1024px;
#phone-max-width: 768px;
#desktop: ~"only screen and (min-width: #{desktop-min-width})";
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
#phone: ~"only screen and (max-width: #{phone-max-width})";
#appHeight: 749px;
#appWidth: 421px;
.derp {
#media #desktop {
background-color: orange;
}
#media #tablet {
background-color: red;
}
#media #phone {
background-color: green;
}
}
There is a problem with
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
Remove it for a moment, and you will see green background is displayed for phone screen.
You need to add ")" for a #tablet at the end
A screenshot is below of the webpage that I need to optimize the screen sizes for. The horizontal bar above the navigation bar with the logos, white background and the clubs on the left is what I'm wanting to optimize the screen size CSS code for. I've only started working with html and css a few month ago.
Webpage
From 1230px the margin-left increases by 0.8px. Is there a way to increase the webpages performance with the 35+ "#media screen and (min-width: #px)" that will be needed to cater to screen min-width of 1930px or more? Or will this many not affect the pages performance at all?
/* Team Logos spacing for different screen sizes */
#media screen and (min-width: 1200px)
{
.clubs .llul .logoli
{
margin-left: 0px;
}
}
#media screen and (min-width: 1210px)
{
.clubs .llul .logoli
{
margin-left: 0.45px;
}
}
#media screen and (min-width: 1220px)
{
.clubs .llul .logoli
{
margin-left: 0.9px;
}
}
#media screen and (min-width: 1230px)
{
.clubs .llul .logoli
{
margin-left: 1.3px;
}
}
#media screen and (min-width: 1250px)
{
.clubs .llul .logoli
{
margin-left: 2.1px;
}
}
.
.
./* Rest of code between 1250px and 1630px */
.
.
#media screen and (min-width: 1630px)
{
.clubs .llul .logoli
{
margin-left: 17.3px;
}
}
#media screen and (min-width: 1650px)
{
.clubs .llul .logoli
{
margin-left: 18.1px;
}
}
I've also added a snippet of the code behind the element. The rest of the CSS for it is not shown.
<div class="clubs">
<p style="display: inline;">Clubs</p>
<ul class="llul">
<li class="logoli"> <img class="logoT" style="" src="media/teams/smlafel.JPG" alt="fl">
<ul class="llul">
<li class="logoli" style="padding-left: 10px;"> <b>Africa Elite</b> </li>
<li class="logoli"> <img class="logoT" style="" src="media/teams/smlafel.JPG" alt="fl"> <b>Africa Elite</b> [Men's Premier Division] </li>
</ul>
</li>
</ul>
</div>
Please don't do stuff like that. You're just copying & pasting your code for .clubs .llul .logoli and adjusting the margin-left rule every 10px. There's definitely something wrong with that from a programming point of view. This does not affect the performance (well, maybe when resizing your browser window vary fast), but your CSS file will be much messy and heavier than it has to be, so when the browser will download this file at the beginning, then loading the page, it can take a while.
The solution here is to go with this:
#media screen and (max-width: 1200px) {
.clubs .llul .logoli {
margin-left: 0px;
}
}
#media screen and (min-width: 1200px) {
.clubs .llul .logoli {
margin-left: calc((100vw - 1200px) / NUMBER_OF_ELEMENTS);
}
}
Where 100vw is always the window width (from CSS's point of view). So when it's bigger than 1200px, you get the size you want to share between all your logos and divide it by some constant than can be the number of those logos, more or less than that. You can adjust it as you like.
Even more clever way to go with this is to take a look at display: flex and justify-content rules. I'll leave this link here for more infos:
https://tailwindcss.com/docs/flexbox-justify-content/
Hope this was useful, good luck!
Why don't you use svg for the logos if you have them in that format, they will scale up and down to perfection and read like code, therefore no optimisation required
Using the #media tag, how do I display a new image, for example I have a logo I want to use for my main site and a mobile logo for my mobile site, how to I display the smaller logo only on the mobile site using #media?
I've tied using "display:url('xxxx') but that hasn't seemed to work.
You'll have to put two logos on your HTML, like this:
<img src="" class="desktop-logo">
<img src="" class="mobile-logo">
Then, you'll have to hide the mobile-logo by default:
.mobile-logo {
display: none;
}
Then, on your media query, you'll have to hide the desktop-logo and show the mobile-logo:
#media screen and (max-width: 480px) {
.desktop-logo {
display: none;
}
.mobile-logo {
display: block;
}
}
What you'll want to do is create an element and set a background on it. You'll use #media control what the background image is based on the size of the window.
#media only screen and (min-width: 768px) {
.logo {
background: url('image.jpg');
}
}
#media only screen and (max-width: 767px) {
.logo {
background: url('imagesmall.jpg');
}
}
And this is what your element would look like.
<div class="logo"></div>
Create a tag with a class then use mediascreen to apply new styles to said class
create a div tag
css/
#media screen .... etc {
.image {background-image: url('wwww....');
}
So, when the exact pixels are reached at the screen it will apply a backround image to that image class I created above.
I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. When you view the app on a smaller screen, the text overlaps and you can't read it anymore. I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced.
Full screen
Reduced screen
On the second line the text disappears, and is "hidden" by the numerical values. The code of that chunk looks like this:
HTML:
<div data-role="content">
<ul data-role="listview" data-divider-theme="a">
<li data-role="list-divider"></li>
<li><b>Revenues</b></li>
<li>Gross Sales<span class="right">$543,600</span></li>
<li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
<li>Less Sales Discounts<span class="right">$5,100</span></li>
(continues on)
CSS:
span.right {
float: right;
}
Add a class to <br>.
Example:
Say u want to break <br> only at a custom screen size 358px n below.
HTML:
<br class="hidden-ss">
CSS:
#media (min-width: 359px) {
.hidden-ss {
display: none !important;
}
}
In reality u may have multiple #media screen breaking points already defined, e.g when using default Bootstrap:
HTML:
<br class="visible-ss hidden-xs hidden-sm hidden-md hidden-lg">
Define CSS:
#media (max-width: 358px) {
.visible-ss {
display: block !important;
}
Already pre-defined in Bootstrap:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
This is a job for a table:
<!doctype html>
<title>Table demo</title>
<style>
td:nth-child(2) { text-align: right }
</style>
<table><caption>Revenues</caption>
<tr><td>Gross Sales <td>$543,600
<tr><td>Less Sales Returned and Allowances <td>$9,200
<tr><td>Less Sales Discounts <td>$5,100
</table>
If you really want the figures placed on the very right, you can add the CSS rule table { width: 100% }, but the presentation is much more readable without it.
so you can use
white-space: normal !important;
I was using white-space: normal; without the !important tag it does not become "wrap text" with JQuery mobile.
For smaller screens please use the CSS below so the span automatically comes in with the next line:
#media only screen and (max-device-width: 480px) {
span.right {
display:block;
text-align:right;
clear:both;
}
}
If you use Bootstrap, you can put a breaking point depending on the screen size.
For example, to break line only on screens smaller than medium, you could put that in your html:
<br class="d-md-none">
More info on https://getbootstrap.com/docs/5.2/utilities/display/#hiding-elements
Hi i got this image gallery and information that should be seen on the right side of the pictures. i floated them both as left. my default resolution is 1366 x 768. it turned out ok. but if i change it to 1024 x 768, the information keeps going down, i need to keep the information on the right side of the image even though other users have different resolutions. here is the code, can some help me?
HTML
<div id="home_page_images">
<div id="home_page_images_slider">
<img src="images/accred_images/image_1.JPG" alt="In the office with the evaluators" />
<img src="images/accred_images/image_2.JPG" alt="Evaluating faculties" />
<img src="images/accred_images/image_3.JPG" alt="CCS students OJT" />
<img src="images/accred_images/image_4.JPG" alt="Packaging of hard documents" />
<img src="images/accred_images/image_5.JPG" alt="Meeting of the evaluators" />
</div>
</div>
<div id="home_page_content_frame">
<div id="home_page_content">
<span>Welcome to the QCE and CCE Evaluation System</span>
<p>The CCE Evaluation process, also known as "Accreditation", is a voluntary, non-governmental process that includes an external review of a professor’s ability to provide quality programs. It is helpful in many aspects, from ensuring that students are learning relevant material to allowing a school access to funding. Accreditation reviews include self-evaluations, peer-reviews, committee-reviews, and the development of in-depth strategic plans. They also include reviews of a school’s mission, faculty qualifications, and curricula.</p>
</div>
</div>
CSS
#home_page_images {
position: relative;
width: auto;
margin-top: 40px;
margin-left: 40px;
float: left;
}
#home_page_content_frame {
float: left;
width: auto;
}
#home_page_content p {
text-align: justify;
position:relative;
}
On your divs, you could use percentages instead of pixels like robobobobo said, but then if you are making it for mobile devices, you would probably want to use media queries as mobile devices are small, and if you decide to use something like 50% for desktop devices, it would be really small, example of media queries:
#div {
width:375px;
}
#media screen and (min-width: 1366px) {
#div {width:375px;}
}
#media screen and (min-width: 1440px) {
#div {width:428px;}
}
#media screen and (min-width: 1600px) {
#div {width:434px;}
}
#media screen and (min-width: 1920px) {
#div {width:540px;}
}
Change the (min-width: 1920px) part to the minimum or maximum size you want the code to be fore.