I have the situation that I can only use inline CSS because otherwise our Wordpress Theme gets all messed up. I build this little div that is suppose to be a conversion element on our articles. I now need to get it responsive for mobile devices.
all help is appreciated :)
Thats the code I have:
<div style="width: 560px; height: 171px; padding: 32px 32px 0px 32px; box-shadow: 0 0.063rem 0.188rem rgba(0,0,0,0.2), 0 0.125rem 0.125rem rgba(0,0,0,0.12), 0 0 0.125rem rgba(0,0,0,0.14);">
<div>
<h2 style="font-family: 'Circular TT', Helvetica, sans-serif; font-weight: 700px; margin: 0px; color: #003264;">Ist Ihnen das Preis-Leistungsverhältnis für Ihren Zahnschutz wichtig?</h2>
</div>
<div style="margin-top: 32px; display: block; text-align: center;">
<button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem;">Ja</button>
<button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem; margin-left: 20px;">Nein</button>
</div>
</div>
To make your div responsive:
Use a dynamic width value like % or vh that adjusts automatically to the screen size.
Use auto value with the height property to adjust automatically to the div content, because the content would get longer on a narrow screen.
you can also set a max-width to limit the div width on a large screen.
<div style="width: 95%; max-width: 560px; height: auto; min-height: 171px;">
Don't hesitate to reach me out for further assistance if needed.
Related
I was trying to make a button with a red border thats in the bottom and in the middle, but, its padding doesn't let me! You can see with the border, its like 100% width, it makes no sense.
Ive tried everything, the only "solution" i found, was to set the margins to something like 200px, but the hitbox is still massive in the x axis, if someone knows what might becausing this i'd appreciate an answer, thank you!!
HTML:
<div class="message">
<h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
<h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
CSS:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
text-align: center;
color: white;
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
}
How it looks: (except background)
A commenter correctly points out that you should probably change your element from div to button. However, if for some reason you need to keep the element as-is, adding the following CSS rules should center it:
width: fit-content;
margin: 0 auto;
display: block;
Here's a demo:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
width: fit-content;
margin: 0 auto;
display: block;
}
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
I'm having trouble displaying a white horizontal line in a div with a black background next to a heading.
This is what I've tried:
<div style="background-color: black">
<div style="border-bottom: 2px #ededed solid; overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Can anyone help?
Please increase the height in second div tag as I believe 17px is too low
One approach would be to use a combination of a pseudo-element and grid. This avoids the need for unnecessary extra markup, and will adapt to any width.
body {
background: black;
}
h1 {
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;
}
h1:after {
content: "";
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;
}
<h1>Willkommen</h1>
If you have to use inline styles, you'll need to add an additional element like a span to take the place of the pseudo-element, like this:
body {
background: black;
}
<div style="
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;">
Willkommen
<span style="
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;">
</span>
</div>
you can use text-decoration and text-decoration-color CSS properties for the same.
<div style="background-color: black; padding: 15px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<strong><span style="text-decoration: overline;text-decoration-color: #ededed ;color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
another option you can use is <hr/> HTML tag
<div style="background-color: black; padding: 10px 10px 25px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<hr/>
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Update as per image-
You can use Sean's answer
another trick you can try with the below style
.line {
white-space: pre;
text-decoration: line-through;
}
<div style="background-color: black; padding: 50px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen
<span class="line"> </span>
</span></strong>
</div>
</div>
so I am trying to do make my buttons like this.
I have tried creating containers for each button group and setting their padding to 50px 60px per say, but that did not work and they still stretch.
I have this:
Here is the code:
.container5 {
background-image: url("servicos.svg");
width: 100vw;
height: 100vh;
background-size: contain;
max-width: 100%;
left: 0;
}
.container5 .underline {
padding-top: 20px;
padding-bottom: 10px;
text-decoration: none;
border-bottom: 5px solid rgb(220,52,52);
}
.container5 h1 {
margin: auto;
line-height: 30px;
vertical-align: middle;
margin-left: 10vh;
weight: 950;
padding-top: 10vh;
font-family: 'Source Sans Pro', sans-serif;
font-size: 50px;
color: #000;
}
.container5 .btn-group {
left: 0;
margin-left: 5vw;
}
.container5 .btn-group button {
color: white;
background-color: #05031b;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 15px;
text-decoration: none;
position: relative;
padding: 40px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
margin: 0 10px 0 0;
}
.container5 .btn-group .btn-group-ls {
font-size: 10px;
}
.container5 .btn-group2 {
left: 0;
margin-top: 3vh;
padding: 40px 30px;
}
.container5 .btn-group2 button {
color: white;
background-color: #05031b;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 15px;
text-decoration: none;
position: relative;
margin: 0 10px 0 0;
left: 0;
}
.container5 .btn-group3 {
margin-top: 3vh;
}
.container5 .btn-group3 button {
color: white;
background-color: #05031b;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 15px;
text-decoration: none;
position: relative;
padding: 40px 30px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
margin: 0 10px 0 0;
}
<section class="container5" id="servicos">
<h1><u class="underline">Ser</u>viços </h1>
<div class="btn-group">
<button>VIDEO AULAS</button>
<button>
LIVES DIARIAS
<br>
<div class="btn-group-ls">
(ANALISE DO MERCADO)
</div>
</button>
<button>SALA DE SINAIS</button>
<div>
<div class="btn-group2">
<button>
LIVES SEMANAIS
<br>
<div class="btn-group-ls">
(RESTROSPECTIVA DO MERCADO)
</div>
</button>
<button>
LIVES SEMANAIS
<br>
<div class="btn-group-ls">
(PARA DUVIDAS)
<!-- Edit by tacoshy: Missing a div closing tag here -->
</button>
<button>MATERIAIS DIDATICOS</button>
<div>
<div class="btn-group3">
<button>FERRAMENTAS DE AUXILIO</button>
<button>
PREMIAÇÃO POR
<br>
DESEMPENHO (MENSAL)
</button>
<button>PROGRAMA DE TALENTOS</button>
<div>
<!-- Edit by tacoshy: as you see missing a lot closing tags -->
</section>
How do I make the buttons like those ones from the 1st image? Mine's sizes aren't stable and will change if the sentences are too big. Any ideas guys?
Thank you.
EDIT
I managed to align all of the buttons, however, any guess on how to level the buttons? Those who have more text are a few pixels lower than the rest.
You can apply width and height settings to them. To make them all the same height (regardless of the different text amount in them), also add a min-height setting that's at least as high as the highest button.
To center-align the texts in side them properly you can use display:flex; justify-content: center; align-items: center; on the buttons themselves.`
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.
This is the HTML div code I'm using in the body of the post:
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3
Here is the full HTML code--I am embedding 3 Instagram photos.
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>
A photo posted by Astro Doughnuts (#astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>
/div></blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>
A photo posted by Olivia Macaron (#oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-left: 3x;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>
A photo posted by Georgetown Cupcake (#georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="clear: both; height: 1em;"></div>
You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.
At a minimum, and from a mobile first approach:
<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>
<style>
#media(min-width:768px){
div {
float:left;
width:30%;
margin-right:5px;
}
}
</style>
Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.
See example. You should use percentage dimensions
.col{
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 960px){
.col{
float:left;
width: 30%
margin-left: 10%;
}
.col:last-child{
margin-left: 0%;
}
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
.block{ text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}
#media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="block" style=" background: #f00;">
SOURCE 1
</div>
<div class="block" style=" background: #ccc;">
SOURCE 2
</div>
<div class="block" style=" background: #444;">
SOURCE 3
</div>
Please check hope so this will help full for you
There is different options to do that, but both use media queries.
You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).
Or the other solution:
Put your parent element on display: flex on desktop and put it back on display: block on mobile.
.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }
.first { display: flex; }
.first .sub { width: 33.3%; }
.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }
/* media queries for mobile */
#media (min-width: 320px) and (max-width: 480px) {
.first { display: block; }
.first .sub { width: 100%; }
}
<div class="first">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
<div class="second">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
use <li> instead of <div>, then use display:inline-block; or display:block;