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
Related
How do you do?
I have converted XD file to html, css code.
I checked on my PC(windows), but I didn't check on Macbook.
Details:
I coded button and used pseudo element to display right arrow at the right side.
Here is my code.
HTML
<button class="register btn-top-register">Register</button>
CSS
.register{
background-color: #FF6D1F;
border-radius: 10px;
color: white;
padding: 20px 50px;
margin-right: 5%;
border: none;
position: relative;
box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
content: '\1F892';
width: 20px;
height: 20px;
position: absolute;
right: 0;
}
This register button displayed triangle on Windows, but step shape on Macbook.
I tried many times to fix difference.
Could you help me how to fix and display the same shape-triangle?
You can use browserstack to test your code in different devices such as mac and ios
Have a look at these unicodes https://www.toptal.com/designers/htmlarrows/.
If you want to use of unicode I don't know exactly.
I suggest you to use SVG or img to display an icon on your button.
You can download an SVG icon from flatiIcon, or you can use of featherIcon or font awesome for example.
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;
}
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
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'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