I am trying to style the Grid Columns plugin from Justin Tadlock for mobile. Source: https://github.com/justintadlock/grid-columns
In my css file I would like to set the .column-grid .column width for mobile to full, and reset the width for min-width: 768px
.column-grid .column {
float: left;
margin-right: 5%;
margin-left: 0;
}
#media only screen and (min-width: 768px) {
.column-grid .column {
}
}
I tried width: 100% versus width: auto, and display: block versus display: inline. However, it didn't do the trick.
Note, the actual column widths are set within the .column-grid .column wrapper.
Any suggestions on how to do this smartly?
If you're trying to stack the columns vertically on mobile devices and have them display as columns on desktop then change the media query:
#media only screen and (max-width: 768px) {
.column-grid .column {
width: 100%;
}
}
Otherwise I'll need to see your markup in context.
I just imported the plugins CSS into my stylesheet, at
#media (min-width: 48em) { (768px).
I then deregistered the stylesheet the plugin enqueues, as there is no need to serve the same content twice:
function remove_grid_columns() {
wp_dequeue_style( 'grid-columns' );
}
add_action( 'wp_print_styles', 'remove_grid_columns' );
(1 less HTTP request, yay!) I think this is the best way, the only thing is remembering to update my stylesheet if grid columns updates. But as I'm using SASS if the plugin gets updated I'll just chuck the updated columns.css into my grid_columns.scss file.
Related
I have created my portfolio for graphic design on the url sebastianpettersson.se. The theme I’m using is called Lekker by Code Interactive. I have searched their support forum but sadly not found any solution to this issue.
My issue is:
I would like to have my logo horizontally centered when my visitors is viewing my page on smartphone or tablet. I’m somewhat a semi novice when it comes to css but tried using this code for it but it sadly does not work.
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
text-align: center !important!;
}
}
(Note that I’m also using a code to hide a button on smartphone and tablet but I’m pretty sure it’s not interfering with it). Posting it to incase that is causing an issue.
#media only screen and ( max-width: 993px ) {
.qodef-m-lines{
display:none !important;
}
}
Any ideas or suggestions?
Set width100% and margin-right: auto; margin-left: auto;
#media only screen and ( max-width: 993px ) {
.qodef-mobile-header--minimal #qodef-page-mobile-header-inner .qodef-mobile-header-logo-link {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 100%;
min-width: 100%;
}
}
You can center your logo by setting margin-left to auto, as it already uses margin-right: auto:
#media only screen and ( max-width: 993px ) {
.qodef-header-logo-link
margin-left: auto;
}
}
First, I want to be clear that !important! doesn't work you should use !important with only one!
Second, you can use margin: 0 auto; to center images,
Third, use flexbox:
display: flex;
justify-content: center;
Tip, try using
#media only screen and (min-width: 450px) for small devices {}
#media only screen and (min-width: 800px) for bigger devices {}
#media only screen and (min-width:1100px) for even bigger devices {}
#Robo Robok 's solution is the way to go. You could also try learning more about positioning and layouts by experimenting with display: flex.
The following change to your header will also work, if you want to alter the position of your collapsible menu too:
#media only screen and (max-width: 993px) {
#qodef-page-mobile-header {
display: flex;
justify-content: center;
}
}
Also, you should have a look at your collapsible menu not appearing below 994px of resolution.
I created a spacing-element that uses two classes:
.spacer-mobile-M = spacing height on mobile devices
.spacer-desktop-0 = spacing height on desktop devices (only active #media (min-width: 992px))
.spacer-blank {
display: block;
border: 1px solid #000;
}
.spacer-mobile-M {
height: 20px;
}
#media (min-width: 992px) {
.spacer-desktop-0 {
height: 0px;
}
}
<div class="spacer-blank spacer-mobile-M spacer-desktop-0" aria-hidden="true"></div>
The expected behavior on a 1200px wide screen would be, that the mobile-spacer is being overwritten by the desktop style (higher specificity due to media query and defined later in the code).
However, right now, the desktop spacer is being overwritten by the mobile style.
I only experience this behavior with a spacer that has a lower height than the mobile value.
Is there a rule, that classes with height: 0 or lower height than the general one (without media query) can be overwritten? I can't find anything in Google when I search for specificity.
Thanks for a short hint.
I think the problem could be use two different CSS classes for the same element. If you use media queries, why don't use the same class? For example:
.spacer {
display: block;
height: 20px;
}
#media (min-width: 992px) {
.spacer {
height: 0;
}
}
<div class="spacer" aria-hidden="true"></div>
I don't know the rest of the code, but if on desktop size you want simply hide the spacer also you can use:
#media (min-width: 992px) {
.spacer {
display: none;
}
}
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
I have two (actually three) #media sections in my CSS. From my experience I hoped that one will override each other because it comes later in the CSS file. However this is not the case (on multiple browsers). What am I doing wrong?
HTML:
<div id="experts-partition-1"></div>
CSS:
#media (min-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
#media (min-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
The browser applies the rules for experts-partition-1 of the first section (min-width: 410px) and not of the second section (min-width: 970px). What might be the reason?
Your code is working, but the condition is, you have to go above 970px to work #media (min-width: 970px) or you can try max-width instead of min-width and sequence should be like this
#media (max-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
#media (max-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
The reason behind using this sequence is the nature of css. It works from top to bottom. Hope it helps
You are using Mobile First Approach to design webpage. You have specified a ruleset in this media query
#media (min-width: 410px) {
/* this means rules are applied when the screen size is min 410px and also above that */
}
Mostly in web development there are two approaches
1. Mobile First
2. Desktop First
Choose one based on the requirement and proceed with it. For better understanding checkout this link about Mobile First vs Desktop First Approach
I have a couple of images in a facebook app. The problem is that the image is quite big and I need it to look well whether it is accessed from a computer or phone. Setting it to some fixed dimension would obviously make it look bad, considering the different screen dimensions.
So, how should I resize it so that it would look well on any screen?
Set the width and height on the img tags to be percentages (of their container):
<img src="http://..." alt="" width="50%" height="30%" />
Adjust percentages to your needs.
Use media queries.
e.g:
#media all and (min-width: 1001px) {
img {
width: 100%; /* insert prefered value */
height: auto;
}
}
#media all and (max-width: 1000px) and (min-width: 700px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
img {
width: 100%; /* insert preferred value */
height: auto;
}
}
Try this
img
{
width:100%;/*adjust this value to your needs*/
max-width: the size of the image;/* so it wont get bigger and pixelated*/
height:auto;
}
another option if possible, is to use media queries, so for different browser sizes, you can load different size of the image.
here is a fiddle to see if this is what you are trying to achieve