I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:
Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:
Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.
Here's the HTML:
<div id="home-cta-text">
<p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
MEMBERSHIPS AS LOW AS
</p>
<div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
<p><span>$19</span><sup>.99</sup></p>
<p class="home-cta-subtext">PER MONTH</p>
</div>
<div style="clear:both;"></div>
</div>
And appropriate CSS:
#home-cta-text {
padding: 1em;
background-color: rgba(0, 0, 0, 0.4);
width: 377px;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
#home-cta-right {
float: left;
width: 156px;
}
#home-cta-left p, #home-cta-mid p, #home-cta-right p {
font-family: 'Franchise-Bold', Arial, sans-serif;
font-size: 109px;
color: #fff;
line-height: 90px;
padding-bottom: 0;
}
#home-cta-text p.home-cta-subtext {
font-size: 40px;
line-height: 40px;
}
#home-cta-text sup {
position: relative;
height: 0;
line-height: 1;
vertical-align: baseline;
font-size: 49px;
display: inline;
margin: 0;
padding: 0;
bottom: 43px;
}
Can anyone tell me what's going on here?
EDIT: I just noticed that if I remove my #font-face font, the text wraps normally. What's going on here?
I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.
EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type (http://www.weathersbeetype.com/fonts/franchise/) and it now works in Safari 10+ (and all other browsers).
try use not 'P' just use DIV, and use just text-align center
Related
I got 2 forms at my webpage and they are wrongly aligned on iOS devices (iPhone, iPad Safari). On computers it displays correctly (Windows and actually even Mac with Safari) but on mobile devices for some reason the inputs are not centered. Interesting thing is that it's not the whole form but just the input element.
1st picture is how it looks in developer tools in Chrome for example and 2nd picture is how it looks on iphone.
HTML
<form class="newsletter-form">
<div class="newsletter-form-container">
<input id="newsletter" type="email" placeholder="name#domain.com" />
<button id="newsletter-send" type="button"><i class="material-icons">chevron_right</i></button>
</div>
<p id="newsletter-sub-status"></p>
</form>
CSS
.newsletter-form-container {
position: relative;
width: 40%;
margin: 0 auto;
}
.newsletter-form {
position: absolute;
height: auto;
bottom: -38px;
left: 0;
z-index: 50;
width: 100%;
-webkit-appearance: none;
}
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
}
there is one more form and that one is positioned static and the inputs are display: block and also displays wrongly. Is this just some iOS thing that I can fix with -webkit something? Couldn't find the answer on google, so I'm trying here.
PS: sorry for different picture sizes, one was taken as phone screenshot and other one is snip from PC.
So, I found out that, iOS just adds padding to the input element by default and since the default setting for the input is box-sizing: content-box; all you have to do is:
a) set padding to the input element to 0 padding: 0;
or
b) set box-sizing: border-box; and then the padding goes inside the element basically.
final CSS for the element then looks like this:
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
padding: 0;
}
A few days ago I started learning HTML / CSS in my spare time and programming my own test website. At some point I encountered a problem when I tried to visit my website on my smartphone. Here Here you can see that the Picture is shifted above the border.
Everything works fine on the desktop, but as you can see, it has moved on the mobile device. I tried several methods, but none of them resolved the problem. Since I just started, I have no other ideas.
I do not want to post all my code, so the problem is here
thank you in advance
Your problem is not only related to mobile I'm afraid.
That is what happens when you float, the container element loses its layout. To fix it you just need to give it back applying for example an overflow: hidden.
But I suppose you want to still have the img on the right of the Personal Data, for that you have to put the image inside the same container, applying the overflow: hidden.
Just like this:
/*SCHRIFTART*/
#font-face {
font-family: 'Levenim MT';
font-style: normal;
font-weight: normal;
src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}
/*ALLGEMEIN*/
* {
margin: 0;
padding: 0;
}
/* CONTENT */
#PB-Bild {
float: right;
margin-top: 6px;
margin-right:7.5px;
}
#Information {
overflow:hidden;
height: 30%;
width: 98%;
border: 7px outset grey;
background-color:whitesmoke;
font-family: 'Arial Rounded MT';
padding-left: 5px;
color:darkblue;
}
.was {
font-size: 150%;
font-weight:900;
}
p.was::first-letter {
color:brown;
font-size:160%;
}
.was {
font-family:Arial;
color: black;
}
.uText {
font-family:Arial;
background-color:ivory;
font-size:120%;
}
<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
<p class="was">Name:</p>
Domenic Malz <br>
<p class="was">Alter:</p>
16 Jahre <br>
<p class="was">Geboren am:</p>
29.04.2002 <br>
<p class="was">Wohnort:</p>
Berlin <br>
<p class="was">E-Mail</p>
postfach#domenicmalz.de <br>
</div>
The issue you are bringing is known as responsiveness. There are many ways to make your website responsive, first thing I noticed when looking at your code, in your css you are making use of "px" values, they are pixel values meaning they are not scaling with the size of the screen. You should familiarise yourself with more responsive values such as "vw" and "vh" that do scale according to the size of the screen.
If you add a few properties to #banner2, you can ensure the background does not auto scale.
#banner2 {
…
background-size: cover;
background-position: center;
}
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
I am having a hard time understanding what to do to prevent Safari (on a Mac) from playing havoc with the alignment of a paragraph element, nested within some divs.
The problem can be seen using Safari web browser at www.redkitesmusic.com/redkites
After loading the page, select THE BAND.
Here is what I get in Safari:
And here is what I get in Chrome (and others)
I have tried to work this out using the web developer inspector but can't figure out what's wrong.
HTML and CSS follow.
Thank you if you can make some sense of my problem and offer a possible solution!
This is the HTML snippet:
<div id="divPopupContent" style="display: block;" class="bios">
<div style="float:left;width:30%">
<p>About me: I was born in Cameroon in 1989 but have lived in The Highlands of Scotland for most of my life. In 2010 I dropped out of my Ecology course in Aberdeen and moved to Guildford to form a band…</p>
And this is the CSS which applies
#divPopupContent {
background-color: #EEF;
border-radius: 6px 6px 6px 6px;
color: #333;
float: left;
font-size: 0.9em;
height: 92%;
letter-spacing: 1px;
line-height: 1.6em;
margin-left: 6px;
/*margin-top: -18px;*/
margin-top: 6px;
overflow: hidden;
padding: 4px;
padding-right: 18px;
position: relative;
width: 72%;
z-index: 10;
}
#divPopupContent.bios {
width: 78%;
}
#divPopupContent div:first-child {
height: 97%;
opacity: 0.8;
overflow-x: hidden;
overflow-y: auto;
padding: 6px;
}
This is because of font that you are using.
On some version of safari browser, font can't be displayed properly.
That's pretty weird. When I put your code into a Codepen in my Safari browser (Version 7.0 (9537.71), Mac OS 10.9), it looks perfectly normal:
http://codepen.io/anon/pen/JjhKk
Does that Codepen look weird in your Safari?
My designer colleague obviously aligns his text nicely justified in his Photoshop.
How can I apply his design to my code when there will always be some space around text?
I mean I can fiddle with things like negative margin, line-height (see example) or anything. But that can't be a solution.
This question most likely arose already
An example: http://jsfiddle.net/bfpPS/
html:
<section>
<h1 class="wrong">WRONG</h1>
<img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
<h1 class="right">Isn't it beautiful!</h1>
</section>
css:
section, img, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.4285714285714em;
vertical-align: baseline;
background: transparent;
font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0;
}
img {
height: auto;
max-width: 100%;
width: 50%;
float: left;
}
h1 {
font-size: 2em;
}
.wrong {
float: left;
}
.right {
line-height: 0.7em;
}
We all know that "WRONG" is the right way to code this. Your designer is wrong here, not your CSS. Normally when I encounter situations like this, I ignore the exact design and do it how I know is the right way to do it, and then if anyone complains, I tell them that's how the web works. Even if you set a negative margin or do something else hacky, it's going to look wrong in someone's browser who has a different font available or a larger font size set, etc. Why bother with the hacks? Just do it right.