I have zero coding experience and have been working on my portfolio using cargo. I'm currently trying to adjust the mobile view of one of my articles on my home page using media queries, but the code seems to change the layout on desktop as well. I'll drop reference pictures below of the desired mobile and desktop views, as well as the current code I'm working with. Any help is appreciated, thanks!
**(disregard the borders in the code, this was mostly for visibility purposes when making changes)
Here's my code:
<style>
.tiffany {
/*border: solid green 3px;*/
width: 100%;
height: 100%;
}
.tiffany img {
width: 100%;
height: 100%;
position: relative;
}
.tiffany .textbox {
/*border: solid red 3px;*/
position: absolute;
margin: 32px;
font-weight: bold;
text-align: left;
}
.resize_tiffany {
font-size: 5vw;
}
.tiffany .gradient {
/*border: solid red 3px;*/
left: 0px;
top: 0px;
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
/* other styles (left, top, right, and padding) */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
}
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 50px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 16px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
#media only screen and (max-width: 480) {
.tiffany .textbox {
border: solid blue 3px;
position: absolute;
margin: 15px;
font-weight: bold;
text-align: left;
}
#media only screen and (max-width: 480) {
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 10px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 8px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
}
</style>
<div class="tiffany">
<img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
<div class="gradient">
<div class="textbox full-pointer-events-none">
<h1> <span class="resize_tiffany">Tiffany Alfonseca Pays Homage in Painting</span></h1>
<br>
</div>
<div class="read-here">
<bodycopy> <b>Read here</b> </bodycopy>
</div>
</div>
<br></div>
You haven't added in the px like so:
#media only screen and (max-width: 480px)
{
}
Also I would highly recommend using rem instead of vw for the font-size. You can read more about that on: https://www.freecodecamp.org/news/what-is-rem-in-css/
Essentially, If you don't specify font-size the default is 16px, 1rem would therefore be equal to 16px, 2rem = 32px and so on.
Related
On the media queries on one of my portfolio pages, regardless of what I set my font to, it won't change for mobile or desktop. I've tried using px, em, and vw and it still won't change. The font size works well on desktop, but I'd like it to be just a little smaller on mobile.
css
<style>
.tiffany {
/*border: solid green 3px;*/
width:100%;
height:100%;
}
.tiffany img {
width: 100%;
height: 100%;
position: relative;
}
#media only screen and (max-width: 480px) {
.tiffany img {
width: 300px;
height: 225px;
}
}
.tiffany .textbox {
/*border: solid red 3px;*/
position: absolute;
margin: 32px;
font-weight: bold;
text-align: left;
font-size: 5vw;
}
#media only screen and (max-width: 480px) {
.tiffany .textbox {
font-size: 2vw;
position: absolute;
margin: 0px;
padding: 0px;
left: 10px;
font-weight: bold;
text-align: left;
}
}
.tiffany .gradient {
/*border: solid red 3px;*/
left: 0px;
top: 0px;
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
/* other styles (left, top, right, and padding) */
background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 50px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 16px;
font-size: 16px;
border: none;
font color: rgb(255, 255, 255)
}
#media only screen and (max-width: 480px) {
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 10px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 8px;
font-size: 10px;
border: none;
font color: rgb(255, 255, 255)
}
}
html
</style>
<div class="tiffany">
<img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
<div class="gradient">
<div class="textbox full-pointer-events-none">
<h1>Tiffany Alfonseca Pays Homage in Painting</h1>
<br>
</div>
<div class="read-here">
<bodycopy> <b>Read here</b> </bodycopy>
</div>
</div>
<br></div>
You need to add !important to force the CSS for your #media.
No need to write all the class properties in the #media if no changes
#media only screen and (max-width: 480px) {
/* No need to write all properties of the class if no changes */
.read-here {
font-size: 10px !important;
padding: 8px; !important
left: 10px; !important
}
}
Do the same for the other classes.
Update :
<style>
.tiffany {
/*border: solid green 3px;*/
width: 100%;
height: 100%;
}
.tiffany img {
width: 100%;
height: 100%;
position: relative;
}
#media only screen and (max-width: 480px) {
.tiffany img {
width: 300px;
height: 225px;
}
}
.tiffany .textbox {
/*border: solid red 3px;*/
position: absolute;
margin: 32px;
font-weight: bold;
text-align: left;
font-size: 5vw;
}
#media only screen and (max-width: 480px) {
.tiffany .textbox {
font-size: 2vw;
position: absolute;
margin: 0px;
padding: 0px;
left: 10px;
font-weight: bold;
text-align: left;
}
}
.tiffany .gradient {
/*border: solid red 3px;*/
left: 0px;
top: 0px;
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
/* other styles (left, top, right, and padding) */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
}
/* read-here */
.read-here {
position: absolute;
bottom: 4vw;
left: 50px;
background-color: rgb(0, 68, 11);
color: rgb(0, 68, 11);
padding: 16px;
font-size: 16px;
border: none;
font-color: rgb(255, 255, 255);
}
#media only screen and (max-width: 480px) {
/* No need to write all properties of the class if no changes */
.read-here {
font-size: 10px !important;
padding: 8px; !important
left: 10px; !important
}
}
</style>
<div class="tiffany">
<img
class="background-image"
src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg"
/>
<div class="gradient">
<div class="textbox full-pointer-events-none">
<h1>Tiffany Alfonseca Pays Homage in Painting</h1>
<br />
</div>
<div class="read-here">
<bodycopy>
<b
><a
href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/"
target="_blank"
>Read here</a
></b
>
</bodycopy>
</div>
</div>
<br />
</div>
I have a block (container) with gradient as background color. The container have a border, and inside it, i have a text that I want to overflow part of a border and have the same background color. Now I have something like this:
But I want to achieve something like this:
To overflow some border area but still having the gradient background color, because if I add background color to the block of text, it still different from the gradient effect.
EDIT: I'd like to achieve something like this:
According to your JSFiddle code, I think the following code will help you.
.gradient-box {
background-image: linear-gradient(white, grey);
display: inline-block;
padding: 10px;
}
.container {
margin-top: 10px;
border: 3px solid black;
text-align: center;
display: inline-block;
padding: 10px;
}
.text {
margin-top:-20px;
}
.highlight {
background-color: #a9b0a9;
color: #429778;
}
<div class="gradient-box">
<div class="container">
<div class="text"> <span class="highlight"> TEXT </span></div>
</div>
</div>
You're wanting something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: #FBBFBF;
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: #FBBFBF;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #FBBFBF;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
EDIT: With transparent BG. Think this is only possible with square borders...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-image: linear-gradient(to right, red 0%, orange 100%);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
position: relative;
border-top: 0;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.top-border {
width: calc(100% - 100px);
height: 2px;
background-color: black;
position: absolute;
top: -1px;
left: -1px;
}
.top-border-end {
width: 20px;
height: 2px;
background-color: black;
position: absolute;
top: -1px;
right: -1px;
}
.float-text {
width: 80px;
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: transparent;
/* background-image: linear-gradient(to right, red 0%, orange 100%); maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
text-align: center;
}
<div class="container">
<div class="top-border"></div>
<div class="float-text">
Text
</div>
<div class="top-border-end"></div>
</div>
I would do it like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-wrap: break-word;
}
body {
background-color: rgba(255,0,0,0.25);
}
.container {
width: 300px;
height: 300px;
margin: 50px;
background-color: purple;
position: relative;
border: 3px solid black;
border-radius: 15px;
}
.float-text {
position: absolute;
top: -15px;
right: 20px;
padding: 5px 10px;
background-color: #fff2ac;
background-image: linear-gradient(to right, red 0%, orange 100%); /* maybe you mentioning gradient you meant like this? */
text-transform: uppercase;
}
<div class="container">
<div class="float-text">
Text
</div>
</div>
Edit
You mention a gradient, maybe you mean like this? (I added the gradient behind the the text box). If not - remove the background-image gradient if you just want solid colour.
I got autocomplete dropdown filled with almost solid background colour
.Suggestions {
text-align: left;
position: absolute;
border: 1px solid #ddd;
border-radius: 5px;
background-color: rgba(235, 235, 235, 0.95);
list-style: none;
margin-top: -9px;
max-height: 143px;
overflow-y: auto;
padding-left: 0;
width: 406px;
}
covering other elements (buttons, inputs ...) when activated
DEACTIVATED
ACTIVATED
and I would like to make an effect similar to safari dropdown when clicked on url where everything behind is almost visible and also blurred.
Is there any way to do that in css? I know that I can create an image and then apply blur filter but the autocomplete is used in many screens with different background so creating image for each screen would be a mammoth task
function myFunction() {
var Textfield = document.getElementById("Textfield");
if (Textfield.value == "")
document.getElementById("back_div").classList.remove("blur");
else
document.getElementById("back_div").classList.add("blur");
}
.blur {
/* Add the blur effect */
filter: blur(2.5px);
-webkit-filter: blur(2.5px);
}
<input id="Textfield" onkeyup="myFunction()" type="text">
<div id="back_div">test text</div>
This question speaks to blur Can you blur the content beneath/behind a div?
There is also opacity going on there as well, here are some ugly things to demonstrate that.
This is somewhat difficult to answer as it does depend on your markup a bit - and CSS pure vs some JavaScript are in some cases very different. here are some things.
.my-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: .4em;
background: rgba(235, 235, 235, 0.8);
border: none;
border-radius: 0.5em;
padding: 1em 2em 1em 1em;
font-size: 1em;
}
/* the triagle arrow */
.select-container {
position: relative;
display: inline;
}
/* the triagle arrow */
.select-container:after {
content: "";
width: 0;
height: 0;
position: absolute;
pointer-events: none;
}
/* the triagle arrow */
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .3em;
right: .75em;
border-top: 8px solid black;
opacity: 0.5;
}
.my-select::-ms-expand {
display: none;
}
.my-select:focus {
outline: none;
border-radius: 0.5em;
}
select.my-select * {
background: rgba(235, 235, 235, 0.8);
opacity: 0.8;
color: lightorange;
}
select.my-select * {
background-color: #bbeeee;
color: #226666;
opacity: 8;
}
select.my-select *:focus {
background: rgba(235, 135, 100, 0.5);
opacity: 0.8;
}
.list-container>.my-list:hover {
opacity: 0.6;
}
.list-container .my-list li:hover {
color: lime;
);
}
.something {
font-size: 2em;
position: relative;
top: -0.7em;
z-index: -2
}
.my-list {
padding-top: 0.4em;
background: rgba(240, 240, 200, 0.9);
border: none;
border-radius: 0.5em;
padding: 1em 1.5em 1em 1em;
font-size: 1.4em;
border: solid 0.25px green;
}
.my-list li {
color: #227777;
list-style-type: square;
}
.other {
color: red;
font-size: 2em;
background-color: lightblue;
position: relative;
top: -2.5em;
left: 1px;
height: 3em;
z-index: -1;
}
.test-backdrop-container {
height: 10em;
border: 1px dotted red;
font-size: 2em;
position: relative;
}
.test-backdrop {
position: relative;
size: 1.5em;
top: 0.75em;
left: 0.75em;
border: solid blue 1px;
background-color: #dddddd;
}
.test-backdrop {
-webkit-backdrop-filter: blur(10px);
opacity: 0.8;
}
<div class="select-container">
<select class="my-select">
<option>one wider text</option>
<option>two</option>
<option>eagle</option>
<option>canary</option>
<option>crow</option>
<option>emu</option>
</select>
</div>
<div class="something">something here</div>
<div class="list-container">
<ul class="my-list">
<li>one wider text</li>
<li>two</li>
<li>eagle</li>
<li>canary</li>
<li>crow</li>
<li>emu</li>
</ul>
</div>
<div class="other">Tester out
<input class="other-input" type="text" value="something in textbox" /> More is not more but not less
</div>
<div class="test-backdrop-container">Test Container
<div class="test-backdrop">Test Backdrop</div>
more text in container more test text
</div>
is it possible to draw a final border around these 2 shapes without having the border of the circle on the left and the right?
heres what i have so far
<div class="site-header1">
<div class="logo">
<div class="text">
<span>Class</span>
<span>Class</span>
</div>
<div class="img"></div>
</div>
</div>
css
.site-header1 .logo{
position:relative;
height: 80px;
}
.site-header1 .logo .text{
padding: 10px;
font-weight: lighter;
font-family: 'Lato', sans-serif;
font-size:1.5em;
border-radius: 25px;
background:white;
border:1px solid rgba(0, 0, 0, 0.5);
position:absolute;
top: 17px;
}
.site-header1 .logo .text span+span{
padding-left:75px;
}
.site-header1 .logo .img{
border-radius: 100px;
background:white;
border:1px solid rgba(0, 0, 0, 0.5);
position:absolute;
left: 75px;
top: 7px;
height: 70px;
width: 70px;
}
i have a fiddle started here http://jsfiddle.net/TH5E5/
While I believe you could use background gradients to possibly get the effect (something similar to what is done for this answer), an easier route is to...
Use a Pseudo-Element for the Border
This fiddle seems to be what you want, and looked good to me in Chrome, Firefox, and IE9. It puts the border on a pseudo-element to push the circle with border behind the main shape, then uses the .img itself to overlay the borders of that shape. Here is the changed portion of your css code (your html is the same as you had it, and so is most of your original css):
Changed/Added CSS
.site-header1 .logo .img { /*this is the image itself */
border-radius: 99px; /* 1px less than the border */
background:white;
border:0;
position:absolute;
left: 76px; /* 1px more than border below */
top: 8px; /* 1px more than border below */
height: 70px;
width: 70px;
}
.site-header1 .logo:after { /*this is the image border */
content: '';
border-radius: 100px;
background:white;
border:1px solid rgba(0, 0, 0, 0.5);
position:absolute;
z-index: -1; /* push it behind */
left: 75px;
top: 7px;
height: 70px;
width: 70px;
}
To get Text to Overlap the Image
Change some properties:
.site-header1 .logo .text {
/* position: absolute; needs to be removed */
display: inline-block;
margin-top: 17px; /* this replaces the top: 17px when it was absolute */
}
Then add the following to push the text above the img:
.site-header1 .logo .text span {
position: relative;
z-index: 1;
}
See the result in this fiddle.
I have a DIV that I want to be scrollable, but the problem is that I'm using position: fixed; and the DIV doesn't adjust it's position with the rest of the page; thus disappearing on small resolutions. Any suggestions would be wonderful.
Here's the current DIV:
<div style="
display: block;
top: 200px;
left: 1500px;
width: 130px;
position: fixed;
border: 1px solid rgb(136, 136, 136);
padding: 10px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color:#FFFFFF;
">
Instead of using pixels for top and left properties use percentages.eg:top:20% instead of top:1200px. In smaller resolutions your top left values makes your div go out of the screen. Try this
display: block;
top: xx%;
left: nn%;
width: mm%;
position: fixed;
border: 1px solid rgb(136, 136, 136);
padding: 10px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color:#FFFFFF;
According to your dives sizes adjust your percentage values.
One side note If you are targeting mobile devices you can use media queries too eg.
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#myDivId{
width: 100px; /* or width:10%; */
}
}