I want to evenly align the two images on either side of the h2 for a responsive design and allow the images to scale down when the browser is reduced, eventually disappearing in small windows such as on mobile devises. Would like to know what I am doing wrong.
JsFiddle
the h2 needs to have float: left; as well
You also need to create a css sheet that calls for the actions based on the screen size (in pixels)
see link:
jsfiddle
All you need then is to use float left
#tag-container h2.tag {
font-family: 'Droid Serif', serif;
font-size: 52px;
font-style: italic;
color: #34291c;
letter-spacing: 1px;
text-shadow: 0px 1px 1px rgba(255,255,255,0.9);
text-align: center;
margin: 0;
**float: left;**
}
Related
I am adding some new features to this website here and have added a cookies notice.
As you can see this is currently at the bottom of the page.
Now I want to have this only around 1500px wide and the whole notice centered. I have tried loads of techniques to achieve this but it seems to be centering to the left and this is possibly because of the live chat window. I'm not too sure why this is occurring or how i can bypass this at all.
This is the most recent code I have tried
#cookie-notice.cn-bottom.wp-default {
color: #fff;
font-family: lato;
font-style: normal;
height: 80px;
font-size: 16px;
background-color: #406639 !important;
/* display: block; */
display: block;
margin-left: auto;
margin-right: auto;
/* width: 50%; */
Something else I have tried to achieve is when putting the option in the plugin for the cookies notice to be at the top, this overlaps the green top-nav that is already there. I have tried using position:relative and position:absolute and other CSS to try and get this to be floating at the top of the page and not overlapping anything. So the order would be as below
COOKIES NOTICE
GREEN TOP-BAR
NAV-BAR
then when cookies are agreed-to, the notice will disappear, and the green top-bar will be at the top. When trying this, the cookies-notice and green top-bar just overlap.
Removing height from your #cookie-notice div and adding top/bottom padding would be better approach to solve this issue. Try this code.
#cookie-notice.cn-bottom.wp-default {
color: #fff;
font-family: lato;
font-style: normal;
font-size: 16px;
background-color: #406639 !important;
display: block;
padding: 20px 0;
}
I have used this custom CSS to format the last three letters of the single word on the second line of my banner text on my site as bold. However, the mobile view of the last three letters displays it as a subscript. I would like all of the second line in the mobile view to be the same size as the last three letters. The website is chad-ruffin.squarespace.com. Custom CSS:
.desc-wrapper p:nth-of-type(2)
{ display:inline-flex;
font-family: brandon-grotesque;
font-weight: 400;
font-style: normal;
font-size: 68px;
text-transform: uppercase;
line-height: 1em; }
It's not a subscript. It's just that the font-size: 68px is larger than the rest on mobile. Scale it down on mobile to maybe 36px and it should fit right. You might have to change the line-height too.
I use these sizes for the text in my CSS but I am facing a problem with line height. I want to decrease the line height in CSS but when I use mark tag the words will be on each other. I have attached an image that shows the issue:
Code:
h1 {
font-size: 58px;
text-transform: uppercase;
margin: 0px 0px;
line-height: 1em;
font-family: "frutigerBold75";
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
you should put desired line-height inside mark
before
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
after
h1{
font-size: 58px;
text-transform: uppercase;
font-family: "frutigerBold75";
}
mark{
display: block;
line-height: .8em;
}
<h1><mark>Guidelines on Certification <br />and Grading</mark></h1>
It looks to me like the issue is a font issue.
(that's the reason why if running the code snippet it's correct).
What I would suggest is to try to change the line height (manually) till you get a result you'd like.
Also, something else you could keep in mind is the internal padding (as it seems to be some from the picture you added.
unfortunately, without the same font you're using it's quite tricky to debug and help you further more.
so, to recap:
manually adjust the line height (to be 1.1em or more, for instance)
try with a different font
make the padding to 0, and start adding some as required
Given the following css code, the text (arrow) is vertically centered in Chrome while not in IE11, could someone tell me why and how can I achieve the same effects in IE11?
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
}
<span>⇑</span>
Screenshots:
Chrome:
IE11:
By default, the computed font-family is Times New Roman as the inspect view shows:
However, looking through the supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1)is not supported by Times New Roman. In this case, browser is free to choose which font to use, and we have no idea how the characters would be aligned (since we don't know which fallback font the browser has chosen to use internally), that causes the behavior varies from browsers.
So how to make it vertically centered? One simple method would be explicitly specifying a font-family which contains ⇑ (U+21D1), for example, Cambria
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
font-family: Cambria;
}
<span>⇑</span>
I am using a custom font (Oswald) for the headings or titles within my page. I believe that its' height is conflicting with the native fonts (Arial, san-serif etc.) and would like to know if there is a way to set both fonts evenly...? If more text is placed in later on, the gap difference becomes substantial.
Please take a look at what I have here: http://jsfiddle.net/x6v7F/
I have a temporary background fade in and out to illustrate.
thank you.
It doesn't seem to be a font-size issue, the issue seemed to be with you specifying the line-height
If you see this fiddle, you can see I've changed h1 and h2 to have these line-heights
h1 {
font: 16px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#000000;
margin:14px 0;
line-height: 100%; <----
}
h2 {
font: 12px 'Oswald', Arial, Helvetica, sans-serif;
text-transform: uppercase;
color:#BBBBBB;
margin-bottom: 14px;
line-height: 100%; <----
letter-spacing: .2px;
}
If you check that Fiddle, it seems to have fixed your problem?
Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.
Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.
To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.
section { height: 370px; position:relative; }
section .button { position:absolute; bottom:0; right:0; }
Edit:
If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:
<style>
section { position:relative; padding-bottom:50px; }
section .button { position:absolute; bottom:0; right:0; }
<style>
<script>
var max_height = 0;
$('section').each(function() {
max_height = Math.max(max_height, $(this).height());
}).height(max_height);
</script>