I'm trying to change the breakpoint of a website's header.
the theme I installed onto this website has the mobile header breaking at 1139px and below. I want to change it so that it breaks at the standard 1024px (ie 1023px)
website: https://www.vibrantrealestate.com.au/
normally i just go into the css and change the #media query to the width i want to, but this theme has quite a few #media querys with min-width: 1140px/max-width: 1139px when i searched in the stylesheet so i'm not exactly sure which one I should change. i've tried trying to change them individually through the wordpress customiser, however i'm still a bit stuck for ideas as it isn't changing the appearance. thanks
I would not modify the theme's original style rules, instead you want to override them.
Although not advisable, this could be as simple as making new #media rules placed at the very bottom of the theme's CSS file, so in theory they override the earlier rules (if you configure the new rules correctly).
However the best thing would be to create a child theme, with the original theme as the parent. This would ensure your changes are wholly separate from the original code; much cleaner/safer/more-organized.
In either case, you'll have to use your brain to setup the new rules so they fully override the originals. You may need to make use of the !important flag.
You could make an override that covers a slightly wider range, to make sure your aesthetic changes take hold. e.g. min-width: 1000px/max-width: 1200px; (if the original is min-width: 1140px/max-width: 1139px).
You can't avoid work when doing responsive optimization.
Related
I am creating media queries for a page but I'm having a problem in getting them to break at exactly the points specified in my media queries.
For example I have:
#media all and (max-width:1000px) {
header nav ul.nav_items li a {
padding:15px 10px 15px;
}
}
But when I use Chrome and open the dev tools, and observe the viewport/width of the browser, the CSS rules take effect at somewhere around 1226px. Why aren't the CSS rules being applied at exactly 1000px?
Here is a jsfiddle of my HTML/CSS: https://jsfiddle.net/at68m0zp/
By moving the media query to the end of your CSS file, you will make it override the set values. The later something appears (and the more specific it gets) the more preference it receives. Because your query is at the start of the file, any changes to your header nav's display property later does not get applied. Please not that media queries do not increase specificity or get any special treatment, they just get ignored until they are in the range defined by them.
So there is probably a snippet later in your file with a max-width of, say, 1000px. Because it comes after your 900px one but the screen size makes both valid, the 1000px one takes effect.
I had a snippet with the changes but because you posted your entire HTML and CSS it is too long to post here. Trust me, it works if you move it to the end
326px difference is definately not 'inaccuracy'. Something is broken here big time. I might guess that you have more media queries and mistaken min-width max-width setups somewere.
The best to check what is actually going on:
Firefox - hit F12 (or open Dev Tools when on Mac)
Go to 'Style Editor' in Dev Tools top bar
Column on the right shows list of #media rules (breaking points)
Have fun and good luck with debug.
I would like to know what is the best way for making table data responsive in email ?
I use Ink by Zurb for making my responsive email and I would like to insert it a table data (like shopping card table). But I would like it responsive. My idea is to set 2 tables, one for desktop and another for mobile and hide either one or other depending on the size of the screen.
I have found many solutions for hiding something in email. But no one work in every webmail.
Do you have any idea ?
Thanks.
Based on your codepen you have a couple choices.
The first one is a simple solution, similar to what you already have on there. The second is a lot more difficult and complex - but will remove the need to have 2 separate data tables.
1.) Do a mobile table and a desktop table. Have the Mobile table display by default and use percentages with Max-Width to contain for gmail client. Then have media queries at your desktop break point (e.g. usually around 600px) that change it to display:none !important, etc. to hide the table on desktop. You then by default hide the desktop version. In gmail, using display:none doesnt work, in order to get it to work you need to use display:none !important, which makes inlining it pretty much useless. See a list below taken from here on css to use to hide in gmail. You then have the media query also change the desktop table to display, effectively replacing it. This does mean that on gmail web client, that the mobile table will display.
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0; (optional)
mso-hide: all; /* hide elements in Outlook 2007-2013 */ (optional)
2.) Your second option is to build a bunch of block tables that act as each row and the tds will stack on mobile with hidden tds for headers that display on desktop or mobile, etc. This can get very complex and very tenuous as a tiny change can break the whole thing. It would likely give you much better display across all clients, but in my opinion the first option is a much more efficient and sustainable.
I would suggest you take a look at this neat article:
display table explanation
Else you can try to use the display: flex property
I'm using drupal (jollyness) theme and I am hosting a mock up site at seosolutions.london
I have been trying to see if there is a css work around to either "prevent my calendar displaying more than one month at a time" OR "to hide any extra months from view"
I have tried playing around with the widths of the various container divs (using chrome developer) but nothing seems to make a difference.
does anyone have any suggestions please?
Try adding this to your CSS file:
.cal-viewport { width: 220px !important; }
Although you should refrain from using !important in your CSS, it is needed in this case (as inline styles are being applied).
I have a few questions about css media queries.
I. Does both css files (for example normal.css and lessthan1024.css) have to include all css rules? Or can lessthan1024.css include just rules that are different?
II. Does it work with browser resize? Or does page have to be refreshed?
Thanks
I. Let's say you want to have a header with a blue background, no matter the resolution. If you include in your lessthan1024.css file only what is different, that means you won't have a blue background for the header at less than 1024px. So what do you think is the answer to your question in this case?
II. It works on resizing the browser window. No refresh.
That being said, I believe it would probably be better to:
I. Use a mobile-first approach - that means that you start with the smallest display sizes as being the norm and then you start adjusting the look of your page for larger displays
II. Put all CSS, for all display sizes in one file, using #media rules; example:
/* base styling: common rules + smallest display rules*/
#media only screen and (min-width: 35em) {
/* adjust style for larger display */
}
The reason I believe this is better is because... well, if you use 2 .css files, then you will have some rules duplicated. Let's say you want to change some of them. You'll have to make the same changes in 2 places. Maybe you forget to make the changes in one file. Or maybe you don't remember that you've set a padding to 1em in one file and you set it to 2em in the other file.
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/