For some reason my text just stays the same size no matter what I do, however.. the
<div id="box"> </div>
will respond to the the device it's being viewed on.. :/
Link to my website (it's only an intro page): view-source:http://www.lux-boutique.co.uk/
And the css page: http://www.lux-boutique.co.uk/lux.css
The text which I'd like to be responsive is:
<p style="height: 12%; padding:0px; margin: 0px; line-height: 1.1em; font-color: black; color: black; text-align: center; font: normal normal normal 350% 'Palatino Linotype',serif;">LUX <br><strike>BOUTIQUE</strike></style>
Any help is appreciated :D :D
I checked your webpage and observed that you are using Media Queries for responsive text size.
What exactly is happening there is on lux.css
line 77 You have : p - 2em !important
You need to override that .
You can do two things:
Remove !important from there so other styles get applied ,
OR
Add important in media queries Overriding the style on p tag.
Ex:
#media screen and (max-width: 1020px)
p {
font-size: 2em !important;
}
If you separate your CSS from the HTML you should used media queries to make your font size responsive.
Your sites font size is set by either the visitors default browser styles or a size you set. The same font size will be used in all cases if media queries are not used.
Divs are the same however your div is simply doing as it is told (100% of whatever the screen size is).
Documentation on media queries ›
CSS Tricks showing how to use media queries for mobile sites ›
Related
I wrote a class with CSS properties and I want it in the way that the screen at my breaking point which I've decided then media query work how I can use the for example:
When the screen is larger than 600px then it works and
if the screen is less than the breaking point then this media query works.
.test {
width: 30% !important;
display: inline-block;
margin: 10px;
}
#media only screen and (max-width: 600px) {
.test {
width: 100% !important;
display: inline-block;
margin: 20px;
}
}
That is not working. Please anyone help me with this.
The CSS you provided is valid.
If you are not seeing the expected result, the following things may be happening:
There is no element in your HTML which has a class of test. — If you run document.querySelectorAll('.test') in the console and you are not getting any results, then there are no elements which match the CSS selector of .test.
The CSS is actually not being loaded. Maybe you are not putting your styles inside a <style> tag, or you are not correctly loading the stylesheet with <link rel="stylesheet" href="/path/to/your/styles.css"/>? — Your browser’s developer tools should show your stylesheet being loaded in the Networks panel. Alternatively, styles should be present on the page, within a <style> tag.
The CSS rules are being overwritten. Are there are any styles which are styling the .test element(s) after the above CSS rules are applied? — Your browser’s developer tools can show if styles are being applied or not.
Sharing your HTML will make it easier for people to help you.
I'm trying to implement a code on my Squarespace website's homepage to make the 'Soph and Mat' www.thedistancelive.com larger on mobile only.
I've tried the following:
#media only screen and (max-width:640px) {
#block-yui_3_17_2_1_1594350948064_7952 {
font-size: 35px;
line-height: 35px;
padding-bottom: 20px;
margin-top:10px;
}
}
#media only screen and (max-width: 767px){
#block-yui_3_17_2_1_1594350948064_7952, .index-section-wrapper h1 {
font-size: 80px;
line-height: 35px;
padding-bottom: 20px;
margin-top:10px;
}
}
The margin-top/bottom work but the font size is not budging.
Can anyone help, please?
Thank you x
The issue has to do with CSS being overridden by a rule that is both higher specificity and using !important. That is not atypical in Squarespace, where the rules are written based on style and template selections made in the back-end, creating CSS rules with relatively high specificity.
In such cases, one should use the browser developer tools/inspector to view the rule in question. Then, a rule of equal or greater specificity can be be written to override the default CSS.
To do that:
While viewing the page, narrow your browser's width until mobile styles are enabled.
Right-click on the element in question. In this case, that is the H1.
Select "Inspect" (or "Inspect Element" in Firefox and other browsers).
In one of the panels, you'll see the CSS that applies to the target element (the H1 in this case). Find the active rule that is setting font size.
5. Based on that rule, write your own rule of equal or greater specificity and priority. Something like this:
#media only screen and (max-width:640px) {
.index-section-wrapper .content.has-main-media #block-yui_3_17_2_1_1594350948064_7952 h1:not(.OT_title) {
font-size: 35px !important;
}
}
6. Add the rule via Custom CSS / CSS Editor.
There are other ways to write a rule of greater specificity than the example above. It is just one example.
I'd like to have a single h1 tag and have different styling for it. I'm not sure if my css is the easiest way to do it? I"m using bootstrap so maybe there is a more concise way?
I have the following HTML:
<h1>Hello I am an h1 tag</h1>
And following css:
h1 {
color: yellow;
font-size: 32px;
}
#media (min-width: 576px) {
h1 {
color: red;
font-size: 60px;
}
}
Refer to link bootsrap
Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.
Then Best way as I know is to use media queries.
Viewport is another way for this. But not all browsers supports link info. Then most reliable way is to use media queires
I am looking to add a hyperlink in a HTML email but only on mobile through CSS3. Is there any CSS3 property to do that?
This is not possible via CSS.
You have a couple options:
Something like <span class="mobile">The link</span><span class="desktop">No link</span> plus a #media query to show/hide the two spans on different device sizes.
Style the link on desktop via a #media query so it looks like normal text (i.e. color: #000; cursor: default; text-decoration: none;)
ceejayoz is pretty close. You just have to reverse your thinking a little bit.
If you're only putting the hyperlink on mobile/smaller screens this can be done easily with inline css and an #media query in the <head>. (Note. I would recommend sending the emails through an Email Service Provider to make sure your #media query remains untouched.)
This is the approach I would take.
CSS
#media only screen and (max-width: 480px){
a[class="link"] {
font-size: 12px !important;
color: #000001 !important;
text-decoration: underline !important;
}
}
HTML
<a class="link" href="http://yourlink.com" style="font-size: 1px; color: #ffffff; text-decoration: none;">yourlink.com</a>
I should also mention not all mobile email clients will recognize the #media query properly. Gmail on Android for example doesn't work very well when developing responsive HTML emails.
I don't understand why form width increases on Safari for iPhone. I tried to modify my CSS, and seems that "font-size" caused the problem. Any Solutions?
This is the code:
HTML:
<input type="text" id="form" class="newsletter_input" name="email">
CSS:
.newsletter_input {
border: 0px solid #fff;
background: #fff;
color: #0ce980;
font-family: 'Lato', Arial;
font-weight: 300;
font-size: 42pt;
width: 855px;
height: 100px;
margin-left: 50px;
margin-top: 10px;
text-align: center;
}
.newsletter_input:focus {
ouline: 0;
}
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
.newsletter_input {
width: 855px;
}
.newsletter_input #form{
font-size:42pt
}
}
Though it's not ideal to hardcode 855px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.