My button has following CSS code. When I resize the window the text falls outside of the div in chrome. (usng the mobile layout)
http://www.syntra-limburg.be/voltijds-praktijkleren
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 1.35em;
width: 190px;
max-width: 100%;
text-align: center;
display: block;
}
I fixed it using following code but I was wondering if there isn't a more elegant solution? I do not understand why this is happening.
.responsive-layout-mobile a.syntra-green-button {
font-size: 1em;
}
Try font-size percent like font-size: 115%;
css
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 115%;
width: 190px;
text-align: center;
display: block;
}
Set width to auto. You limited it cause of that it overflows
You can change how the width of the button is rendered using the below. First change the width to be percent based for desktop style displays:
width: 30%;
but also add a minimum width for when it it resized for a responsive device that fits the entire word:
min-width: 200px;
So full class would be:
a.syntra-green-button {
background-color: #6faf3c;
border: 1px solid #9dcc77;
color: white;
padding: 15px 2%;
margin: 5px auto 0px;
position: relative;
font-size: 1.35em;
width: 200px;
min-width: 30%;
max-width: 100%;
text-align: center;
display: block;
}
See this JSFiddle: http://jsfiddle.net/8tBQ3/
.responsive-layout-mobile a.syntra-green-button {
font-size: 100%;
}
Related
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
Edit: here is a CodePen with CSS / HTML
I spend the weekend creating a CSS card for a website, only to realize that it's not responsive, at all. I'm not very well versed in CSS or responsive design, so I am hoping someone with more experience can help me out. So far, I've tried playing around with the #media tag, but I have not had any success. This is the relevant CSS:
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
background: #ffffff;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.courses-container {
}
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
display: flex;
max-width: 100%;
margin: 20px;
overflow: hidden;
width: 1300px;
}
.course h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.course h2 {
letter-spacing: 1px;
margin: 10px 0;
}
.course-preview {
background-color: #2a265f;
color: #fff;
padding: 30px;
max-width: 250px;
}
.course-preview a {
color: #fff;
display: inline-block;
font-size: 12px;
opacity: 0.6;
margin-top: 30px;
text-decoration: none;
}
.course-info {
padding: 30px;
position: relative;
width: 100%;
}
.right-container {
padding: 30px;
background-color: #fff;
width: 30%;
line-height: 200%;
}
.progress-container {
position: absolute;
top: 30px;
right: 30px;
text-align: right;
width: 150px;
}
.progress {
background-color: #ddd;
border-radius: 3px;
height: 5px;
width: 100%;
}
.progress::after {
border-radius: 3px;
background-color: #2a265f;
content: '';
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 10%;
}
.progress-text {
font-size: 10px;
opacity: 0.6;
letter-spacing: 1px;
}
This is a simple suggestion, using CSS Grid. It's a two column card (as yours): the left column width-fixed (300px), the right column width-fluid. I've applied a little gap between them just to make my example clearer.
.card {
max-width: 1000px;
display: grid;
grid-template: "left right" / 300px 1fr;
background-color: #fed330;
border-radius: 10px;
height: 300px;
}
.card>* {
padding: 20px;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
#media screen and (max-width: 700px) {
.card {
grid-template: "left" "right" / 100%;
}
}
<div class="card">
<div class="left">
Lorem ipsum....
</div>
<div class="right">
Lorem ipsum...
</div>
</div>
It could be a useful starting point.
#gaston
A good way to test and learn about CSS is to use the browser's "Inspect" feature, with which you can test the css behavior in real time.
Activating, Deactivating features, changing values, and adding new ones.
You see the result in real time.
Then just adjust your code according to your tests.
Just right-click on the area you want to inspect. and then Inspect.
You will see an area with HTML and another with CSS.
Click on the areas in HTML and see the corresponding css.
***** Then just test to find the desired result.
That's how I found the solution in your code:
In the ".course" class of your css you added the "width" property twice.
"max-width: 100%;"
"width: 1000px;"
However, the last property entered has priority over the previous ones.
"width: 1000px;" is defining that your card will ALWAYS have 1000px.
SOLUTION:
Just remove: "max-width: 100%;"
And Modify "width: 1000px;" for "max-width: 1000px;"
So your card will have a maximum of 1000px, the minimum will be defined according to the width of the window
It will look like this:
.course {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 10px 10px rgba (0, 0, 0, 0.2);
display: flex;
margin: 20px;
overflow: hidden;
max-width: 1000px;
}
The #media function will set the css when the screen is adjusted to a minimum or maximum width chosen by you.
What is defined within #media will have priority over other css. but only when the window meets the width you set.
You can use this to change the shape of your card completely to very small screens, placing the purple part on top of the card for example.
If you've solved your problem, mark the right answer to help others.
Good luck.
I am creating a table inside a tab. I want to set the width of tab to the width of media screen but keep the width of table fixed to 630px. The max-width of div should be 400px. When the table does not fit into the div, it should display a horizontal scrollbar.
The div is successfully showing a horizontal scrollbar. But, when I resize the window, the scrollbar along with table is hiding inside the div. I want to display the scrollbar according to media width.
The example will become clear:JsFiddle
Please use tab and tab-content class width 100% may be it will work for you. I am sharing your complete code below with my changes i have done some width changes px to %, and what is the purpose for #model margin-right:1000px it will work find without margin.
#tabs-container {
height: auto;
overflow: hidden;
margin-bottom: 40px;
position: relative;
top: 60px;
border: 1px solid #ddd;
padding-top: 10px;
max-width: 400px;
}
.tab {
border: 1px solid #d4d4d1;
background: linear-gradient(#f8fbea, #fff);
margin: -20px 10px 10px 10px;
float: left;
position: relative;
top: 0;
z-index: 3;
width:100%;
height: auto;
overflow-x: auto;
overflow-y: hidden;
}
.tab-content {
padding: 10px;
width:100%
}
#model {
font-size: 12px;
margin: -10px -10px -10px -320px;
position: relative;
margin: 0 auto;
font-family: tahoma;
}
#model {
margin-right: 1000px;
width: 630px;
}
#model td {
vertical-align: middle;
}
#model tr:first-child td {
font-weight: 600;
text-align: center;
background-color: #ebebeb;
}
#model tr:nth-child(even) {
background-color: #f6f6f6;
}
#model tr:nth-child(odd) {
background-color: #fff;
}
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
As part of my HTML5/CSS3 app, I need to implement zoomable image popup. When the user clicks on a small image, a full-screen popup appears containing that image in the middle with a title above it and a button to close the popup below it. Clicking on the image then removes any scaling and puts it full-size inside a box in the middle to allow scrolling - with title and "close" button staying above and below.
I'm using flex (for several reasons, including vertical centering content). The overall popup works and looks fine. Clicking on the image does increase it in size, but it resizes the box so that the "done" button is pushed below the overall popup.
Here's the jsfiddle demonstrating the issue
I don't mind the fact that the box resizes - the more room to view/scroll the larger image - but I need to ensure that the button at the bottom stays put relative to the bottom edge of the popup.
My HTML looks like this (I used a random image for demonstration):
<div id="overlay" class="hidden">
<div id="alsg">
<div class="intro">Assist with ALS</div>
<div class="box scrollable">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Male_monarch_butterfly.JPG" class="fit" />
</div>
<div class="popup-buttons">
<div id="button-alsg-done" class="button button-state-action button-green right">Done</div>
<div class="clear"></div>
</div>
</div> <!-- alsg -->
</div>
With the javascript being
$('img', '#alsg').on('click', function(e) {
$(this).toggleClass('fit');
});
There's a lot of CSS, unfortunately. You'll note that there's a pretty bad mix of flex and old-school positioning. This is because the app initially didn't use flex at all and I'm in a slow process of migrating/cleaning up now.
div#overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 104;
display: flex;
align-items: center;
justify-content: center;
}
div#overlay > div {
position: relative;
width: calc(100% - 40px);
margin: 10px auto;
background-color: #A9A9A9;
border-radius: 8px;
text-align: center;
padding: 10px;
display: flex;
flex-direction: column;
}
div#alsg {
max-height: calc(100% - 40px) !important;
}
div#overlay div.intro {
color: #FFF !important;
font-size: 12pt;
margin-bottom: 10px;
}
div#overlay div.box, div.template div.box {
padding: 3px 5px;
overflow: hidden;
font-weight: bold;
position: relative;
flex-grow: 1;
}
div#alsg div.box {
text-align: center;
position: relative;
overflow: auto !important;
margin: 10px 0px 0px !important;
}
div.box {
background-color: #FFF;
color: #27374A;
border-radius: 8px;
border: 3px solid #FBE96E;
position: relative;
margin: auto;
flex-shrink: 1;
}
.fit {
max-width: calc(100% - 4px) !important;
max-height: calc(100% - 4px) !important;
}
div.popup-buttons {
margin-top: 10px;
}
#overlay .button.right {
margin-left: 10px;
}
#button-alsg-done {
margin-top: 10px;
flex-basis: 25px;
}
div.button-green {
background-color: #2CC55D;
color: #FFF;
font-weight: bold;
}
div.button-state-action {
height: 25px;
padding: 0px 5px;
line-height: 25px;
text-align: center;
border-radius: 4px;
font-size: 10pt;
font-weight: normal !important;
width: 60px;
cursor: pointer;
margin-bottom: 5px;
}
div.button {
height: 22px;
padding: 0px 2px;
line-height: 22px;
text-align: center;
border-radius: 4px;
font-size: 9pt;
width: 42px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.right {
float: right;
}
.clear {
clear: both;
}