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;
}
Related
im trying to move my hyper link to the bottom left of my webpage.
now, the hyperlink is at the top left of my webpage.
thank you in advance for everyone that comments :]
this is the line of code that i added to try to move my link down (failed):
transform-origin: left bottom 0;
{
font-family : Times New Roman;
font-weight : bold;
font-size : 18px;
color : #25374C;
color : rgb(37, 55, 76);
transform: rotate(270deg);
transform-origin: left bottom 0;
text-decoration: none;
position: relative;
top: 6px;
}
<p class="socials_email">sillygoose95#gmail.com</p>
Position property only works on block level, so you have to specify the p tag as a block or inline-block depending on what you need, you can check the differences between them if you wish on w3schools, besides, the position relative refers to the parent position if available, but if not, then it refers to the document, so I recommend using absolute position, and you can read about the differences on CSS Tricks or any other resource.
Resources:
Positioning: Positioning
Inline vs Block: Inline vs Block
So your styling should be something like this:
p {
display:inline-block;
position: absolute;
bottom: 3vh;
left:5vw;
font-family : Times New Roman;
font-weight : bold;
font-size : 18px;
color : #25374C;
color : rgb(37, 55, 76);
transform: rotate(270deg);
text-decoration: none;
}
Can you be more specific on your question. I noticed your css is top:6px;
try to put bottom:6px; your position is relative (try absolute) as well or
transform-origin: bottom left 0px;
I am not sure if this answer your question but hopefully this can help. You usually put the div or your paragraph at the bottom part of your html so it is at the bottom part. I am really guessing on what you want to happen but if you give more specifics I will be able to help you on what you want.
Try to add this lines
.socials-email a {
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 18px;
color: #25374C;
position: fixed;
bottom: 1%;
text-decoration: none;
}
Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}
I'm stuck with issue regarding text positioning over responsive images.
I have ribbon pictures with different sizes (mostly the width varies)
Once the browser's window has been resized the text jumps out of the ribbon.
.first-block-first-ribbon-text-position{
transform: translate(-15%, 60%); /*Actually -15%, 40% works in my project*/
color: #fff;
font-weight: 700;
font-size: 2.0vmin;
}
For media queries I'm making in that way:
.second-block-second-ribbon{
transform: translate(-15%, 60%);
color: #fff;
font-weight: 700;
font-size: 2.0vmin;
}
Is it right approach in this way? Should I only fix the media-query or I it should be overwritten from the scratch?
Also I need that the text would be centered inside images.
Now I'm confused, because I've got a suggestion that all these approaches are wrong...
I need universal solution for different browser window sizes.
P.S. After the code update it seems that JSfiddle example works... But on production ribbons doesn't fix to right corner and text jumps our of it. (I could post a link to a live version)
I'm attaching the img how actually it should be rendered (Look at first part).
JSFiddle: https://jsfiddle.net/DTcHh/19252/
IMG: http://i79.fastpic.ru/big/2016/0412/25/d591b9e5a4ee75d82f9db7c609c81425.jpg
Basically, you just have way too much going on. Why are you using the Bootstrap caption class? That adds some goofy styles. Then, what's with all the transforms?
I'd start with something very simple, and increase font sizes with media queries.
.ribbon {
position: relative;
}
.ribbon img {
width: 100%;
}
.photo-caption {
position: absolute;
top: 15px;
right: 30px;
bottom: 15px;
left: 30px;
color: #fff;
}
Demo
I'm trying to put an image (a hat) above the letter "u" in the word "blablablau".
The result I expect is that:
I solved this with this code:
<img id="img-hat" src="hat.png">
<p id="title-bla">blablablau</p>
#img-hat {
transform: rotate(25deg);
position: absolute;
margin-left: 118px;
height: 23px;
width: 37px
}
#title-bla {
margin-bottom: -5px;
font-weight: bold;
font-size: 170%;
margin-top: 2px;
font-family: 'Open Sans',sans-serif
}
The problem is that, using the SAME browser (like chrome) in different devices, I get different margin-left results in my img-hat.
Example: in my computer it shows correctly. In my laptop it shows correctly too. But, in another laptop (with same screen resolution), it shows the hat a little bit more to the right, like that:
And this behaviour continues in my cellphone and in another computer that I tested.
Why this happens and how can I solve this?
I'd prefer not to have the image in the HTML at all...it's styling so it should be in the CSS.
So, I use a span to wrap the letter to receive the hat, give it a class and apply the image as a background to a positioned pseudo-element.
By sizing everything in em the hat size will be dynamic to the text size.
.title-bla {
font-size: 24px;
margin: 0;
}
.large {
font-size: 72px;
}
.hat {
position: relative;
}
.hat:after {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: -.25em;
width: 1em;
height: 1em;
background-image: url(http://b.dryicons.com/images/icon_sets/christmas_surprise_four_in_one/png/128x128/santa_hat.png);
background-size: cover;
transform:rotate(15deg);
}
<p class="title-bla">blablabla<span class="hat">u</span>
</p>
<p class="title-bla large">blablabla<span class="hat">u</span>
</p>
Then you can adjust either the margins or the positioning values to nudge it into place to suit...even rotate it to a jaunty angle. :)
First, you want to absolutely position from right, not left, because your letters may not be exactly the same in different devices. Even with a web font, the displays vary slightly for each browser with letters.
Second, if you want it very exact then you need font-size and line-height in px or rems. 170% may be slightly different depending on the default font size for various devices. Additionally, sometimes mobile devices adjust font size on short or long paragraphs.
This Fiddle should help: https://jsfiddle.net/cjc5myde/1/
#title-bla {
position:relative; top:-2px;
display:inline-block;
margin-bottom: -5px;
font-weight: bold;
font-family: 'Open Sans',sans-serif;
font-size: 28px; line-height:38px;
}
#img-hat {
transform: rotate(25deg);
position: absolute;
top:0; right:-25px;
height: 23px;
width: 37px
}
To avoid this kind of issue I truly recommend you to use a CSS reset like normalize.css which will make browsers render all elements more consistently.
One way to get the result that you want is trying something like this:
<h1 class="title">Blumenau <i class="hat"></i></h1>
Use your icon/image with position: absolute within a parent element with position: relative so you can control more precisely where your icon should appear. You can change the icon position by change his top/right or bottom/left declarations.
/* Just to put away from the border to this example */
body {
padding: 100px;
font-family: sans-serif;
}
/*
To avoid that margin and padding to be consider on the width and height set
*/
* { box-sizing: border-box; }
/*
Parent
*/
.title {
display: inline-block;
position: relative;
font-size: 32px;
}
/*
Icon/image
*/
.hat{
background: url('http://s23.postimg.org/os0nl4rrr/rsz_hat.png');
transform:rotate(15deg);
top: -2px;
right: -9px;
width: 35px;
height: 19px;
}
/**
* Icon/image position
*/
.title i {
display: inline-block;
position: absolute;
}
See it in action on JSFiddle.
If you put the img tag inside the p tag, it will automatically be placed at the end of the text. From there, you can just position the hat relative to its original position. You're probably going to need to tweak the left value a little.
<p id="title-bla">blablablau<img id="img-hat" src="hat.png"></p>
#img-hat {
transform: rotate(25deg);
position: relative;
left: -20px;
height: 23px;
width: 37px
}
Different machines have different resolutions so their response in how they handle images and text with are displayed differently. This is as expected. Basically a browser will attempt to readjust the website to fit the viewing device.
That being said have you tried adding a z-index to your img-hat. I personally do not use z-index often but in situations like this it could be helpful. Another option have you tried relative positioning?
Different browsers have different default padding and margins that they resort to when our styles aren't applied. Sometimes, it's best if you drop all of that to 0.
Start your css file with
body {
margin:0;
padding:0
}
Check if it works
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;**
}