I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
Related
I know this may seem like a very simple question, but please understand I know very little about CSS.
Essentially, I have a responsive website with two columns. I want to add an ad on the right for Desktop, and one of the left for Mobile. So far so good, I only have to copy and adapt the code they provide on their website, and this did work for mobile, hiding the ad:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
#media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
However, how can I adapt this for desktop? I assumed all I had was to change the max-width: 400px to min-width, but it doesn't seem to be working at all... any ideas on why, and how can I fix it?
In many cases scripts that insert content dynamically tend to modify the element's inline CSS properties and that usually overrides the style definitions, because of specificity. You can learn more on specificity in CSS on MDN.
What I would recommend you to do is to add !important to your style definition to see if that does hide the element. Your style should look something like: (I added some extra info to the #media query.
.adslot_1 {
display:inline-block;
width: 320px;
height: 50px;
}
#media only screen and (max-width: 400px) {
.adslot_1 {
display: none !important;
}
}
What you could also do is open your browser's inspect tools (developer tools) and inspect that specific element to see which styles are being applied and also check that based on media query.
In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}
I'm a bit lost with CSS handling in order to manage stylesheet about screen size. I'm developing a Django website project and I'm confronting to a very delicate situation.
My project is developped on a very good screen (Retina screen) with a very high resolution. But, when I'm watching my project on a very bad screen resolution, some elements are not situated where it should be.
I put for example part from a .css file corresponding to HTML base template :
/* ############################################# */
/* CSS File about Home application properties */
/* ############################################# */
#import url("http://bootswatch.com/flatly/bootstrap.min.css");
/* If screen less than 1440px */
#media screen and (max-width: 1440px) {
.navbar-right {
/*padding-left: 250px;*/
position:absolute;
right:2%;
}
}
/* If screen bigger than 1440px */
#media screen and (min-width: 1450px) {
.navbar-right {
/*padding-left: 400px;*/
position:absolute;
right:2%;
}
}
/* Define background color from upper navbar */
.navbar-inverse {
background-color: #007A5E !important;
}
/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
color : white;
}
/* Tab properties from navbar */
.navbar .nav > li > a {
color: white;
}
footer {
text-align: center;
margin-top: 35%;
}
How I can handle CSS stylesheet in order to adapt the file to screens resolution ?
Can you tell me what is right or wrong in following ideas :
I have to write only % and not px in order to take account screen resolution
I have to write CSS file firstly for screen resolution between a and b, then between b and c, ...
For example, the main content in my Django website corresponding to the class = "col-sm-8". I added margin-top = -68% in order to situate the content exactly where I want. But with my friend's screen, the same block is not where it should be.
I'm really new with CSS (and Django too) because I'm learning at the same time I'm coding in order to realize my project.
Thank you if you could help me on this subject.
Current consensus is to approach web development "mobile first". That means start from the smallest screen size and work up to the largest. Bootstrap does exactly that.
In order to decide what are the best suited media queries for your project see this tutorial and this documentation on MDN. Since you are using Bootstrap, I would suggest following the same breakpoins to avoid inconsistencies.
Also, consider using vw and vh instead of percents, when appropriate (I believe this might be part of that margin-top problem). Percents are relative to a container's dimensions. vw and vh are relative to the width and height of the viewport (see in MDN).
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.