I am designing welcome page for a local non-profit. I am trying my first responsive site, so its kind of a hodge-podge of code. Here's a link to the tutorial I was following to make this happen. I have a hunch that the problem is solely within the CSS. The tutorial has me include a reset.css file to reset all HTML styles.
The problem I'm having is that 1) images and text won't scale using #media and images seem to duplicate in various sizes when viewing on ios. 2) The #font-face and text elements don't work when I combine all CSS into one external style sheet. 3) The h1 text is cut off when viewed in Chrome. 4) The Submit button defaults to the browser default on smaller sizes.
Here is the site: http://www.dubuquedreamcenter.com/
Thank you very much. I appreciate any help I can get to learn this better.
1) images and text won't scale with #media queries
To scale images, put them in container <div>'s with a percentage width. Then set max-width: 100% on the images.
Unfortunately it's not possible to scale text with media queries. You have to manually adjust the font-size at each breakpoint.
...images seem to duplicate in various sizes when viewing on ios
You're loading your logo in the HTML but then also as a background image at smaller viewports. Hide the HTML version in the media queries:
#media (max-width: 783px) {
#logo img {
display: none;
}
}
2) The #font-face and text elements don't work when I combine all CSS
into one external style sheet
Seems to work fine for me when I add the #font-face rules to the top of your main stylesheet.
3) The h1 text is cut off when viewed in Chrome
The <h1> text appears fine to me in Chrome 29.
4) The Submit button defaults to the browser default on smaller sizes.
I'm not seeing that either, but most likely you don't have the custom button styles set in all of your media queries.
In addition to the suggestions from cantera25, in the head of your page your have:
...
<title>Dubuque Dream Center</title>
<link rel="stylesheet" type="text/css" href="scripts/ddc_styles2.css">
<link rel="stylesheet" type="text/css" href="scripts/reset.css">
....
Start by reversing this order, you always call the reset.css script first.
Once you do that there's no reason why you couldn't put the css styles you have in the head of the page into ddc_styles2.css
Related
The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
I'm pretty new to Wordpress modding.
At the moment, I'm using the Shift Nav plugin and I've set it to appear when viewport < 767px. This means that the original logo is there regardless of viewport size.
From the CSS I know that the class for logo is set for media all. I would like:
media (max-width: 767px) { display:none; }
But I don't know how to override the existing css code. I've tried adding the above CSS to the CSS editor and obviously nothing happens.
I don't understand what appears to be inline css, see here:
The site is here:
www.thegraduated.co.uk/store
Thanks in advance
You have a style attribute of display:inline-block in your html tag. You can use !important to overwrite that.
.site-logo-anchor a img { display: none !important; }
Im using google places api for a place autocomplete search - the user starts typing and results pop up.
I've styled the google container using !important to override the styles. So for my desktop css through media queries I have something like:
bottom: 100px !important;
top: auto !important;
Now on my mobile css, again through media queries, I need to move the position, I need the default styles back - the styles are controlled via google in the style tag on the element. But as I have used important i cannot remove them. I have tried:
bottom: auto !important;
Which fixes the bottom position, but how can I remove the top position so that it defaults to what is in the style tag on the element. I've tried:
top: auto !important;
top: inherit !important;
But with no luck.
Using that many !important 's is messy.
A few suggestions: (based on the little code your showing)
2. Don't override an :auto with an :auto. Try to override the styles with a number that give you similar look as :auto
3. Try removing all !important s and call the unique CSS within their perspective media query resolutions, properly. eg.
#media screen and (min-width:320px) and (max-width:480){
... // Your unique styles to Mobile Here
}
4. If all else fails; though, don't know why it would. You can .toggleClass with jQuery to attach a class within a condition. And .removeClass whenever you want. A simple fiddle of .toggleClass (demo) here.
But you really should just be able to clean up your CSS and put everything in their specific media query defined resolutions.
You should be able to do this by increasing specificity on your mobile css file and adding an !important value to this new value in the mobile stylesheet.
I'm not sure of your structure without seeing your html but if you can add an additional class or id to the parent container/element that is specific to mobile css and use that to target your mobile view
for example
#mymobile .classtooverride {newstyles !important;}
I am currently working on a highly design orientated site based on wordpress CMS.
Currently I have a responsive main stylesheet linked externally for the core css. As the site relies heavily on spacing and alignments of both text and images it has become necessary to add inline css using style= HTML to sometimes override the external CSS.
The problem I have is that in most cases certain elements such as margins need to be a different percentage in the mobile view than the desktop view to balance the visual composition. Is there any way to add responsiveness to the inline CSS based on screen width as can be done in an external style sheet?
So far the only way I can think of achieving this is through jQuery amending the external CSS based on the users screen width however this would mean setting up strict rules in the JS eg: for desktop view having margins set at 70% and for mobile setting them to 90%.
If it could be possible to do this inline using html style then this would give my client stricter control and more flexibility. Luckily my client is well versed in CSS.
You could always add a block of css inline with a style element:
<style type="text/css">
#media screen and (min-width:800px) {
.inlineOverride {
/* add more styles here */
}
}
</style>
<div class="inlineOverride">
</div>
It's worth mentioning that HTML5 has introduced a scoped attribute that you can set on the style element to limit the specified style information to the style element's parent element, and that element's descendants.
It isn't widely supported yet, so shouldn't be relied on, but it could be useful in the long term to help prevent inline styles like this from "leaking" into other parts of the document.
This question/answer might be helpful for you(read it thoroughly)
use #media for adjusting your properties of css according to device width-height.
What does #media screen and (max-width: 1024px) mean in CSS?
In modern Browsers you can (kind of) archive this by using custom css properties (css variables):
#media (max-width: 1100px) {
* {
color: var(--color-sm)
}
}
<a style="--color-sm: #11f">Text</a>
(Expand Snippet or open in full page to get the other behavior)
(Color is used for simplicity of presentation, just use margin or any other css property according to your use case.)
I've created a report which is shown on the screen and it should be printable as well. The application has to support IE 6.0 too.
What font-sizes should I be using?
I've read, I should be using em for Screen media (web page) and pt for print media (I know em is scalable and pt isn't...).
How would you design such a page in terms of the css elements?
e.g. creating a separate css file for print media and duplicating all your css classes there and just modifying the font-size? so much duplication.
Isn't there a better way?
Thanks
You don't need to duplicate that much.
Create your report for the Web.
Then, in the body of your stylesheet add a reference for print styles, like so
#media print {
div#content {background:#fff; width:90%; font-family:serif; font-size:12px;}
div#header, div#insideheader, div#topnav, div#footer,
div#navcontainer, p.pic img {display:none;}
div#main {border:none; background:none;}
a {color:black;}
}
In the example above, I am
setting the background-color to white and extending the content to fill the width of most of the page
removing most of the extra pieces, like the nav and footer, extra pics, etc.
changing the link colors
setting the font to a serif font, easier to read for print, and a size of 12px, which is pretty standard.
If you have the first style sheet is marked media all, and the second style sheet is media print, the second style sheet will effectively be an extension, and over-rider of the first for print media. Prefer points for print and ems for screen.
Have a look at this article for other things you might not have thought about.
http://www.alistapart.com/articles/goingtoprint/