I took over a mobile app with AngularJS and Ionic 1.x (yes, old - I know). Inside this <ion-content> I would like to have the part of the email always being 10px away from the right border; independent of the media size. See screenshot in case please.
Here is the relevant part of my .html-file:
<ion-content scroll="true" class="pdfsmtp">
<h5 class="left">1. Email-Adresse:</h5>
<div class="middle">
<button ng-click="changeEmail(0)" ng-controller="EmailsCtrl"
class="button button-small button-block button-outline">{{emails[0]}}</button>
</div>
<br>
<h5 class="left">2. Email-Adresse:</h5>
(...)
</ion-content>
Here is how the .css-file looks like:
.pdfsmtp
{
.button-bar
{
width: 80%;
margin: auto;
}
.left
{
margin-left: 20px;
margin-right: 20px;
display: inline-block;
color: white;
}
.middle
{
text-align: center;
width: 200px;
display: inline-block;
}
.button-icon
{
margin-left: 20px;
color: white;
}
}
#media (min-width: 736px) and (max-width: 1023px)
{
.players.modal
{
top: 12%;
bottom: 12%;
}
}
My question is: How to have my goal achieved? I tried several approaches, but none worked so far...
Are you looking something like this?
button{
width: max-content;
line-height: 1.5;
padding: 0 10px;
font-size: 32px;
border-radius: 16px;
text-align: left;
}
<button>abcz#xyz.com</button>
<br/><br/>
<button>lonnnggg_email#xyz.com</button>
<br/><br/>
<button>mediumemail#h.com</button>
Related
i've been having issues with the image/video grid (similar to Instagram). It does have some Ajax like loading more contents on scroll (which is working fine) but the only problem I have which I couldn't seem to fix or find answers anywhere is the grid.
Before you answer, please note the following:
I am using a template called: AdminLTE 3
Template is powered in Bootstrap 4
I am using CSS Instagram Grid Example
Using the latest jQuery (3.6.0)
Here's a video on what I'm talking about and having issues with
Alright, let's get started.
Here is the CSS Styles that I am using:
.uploads-wrapper
{
display: grid;
grid-template-columns: repeat(4, minmax(100px, 293px));
justify-content: center;
grid-gap: 10px;
}
.uploads-content-post
{
cursor: pointer;
position: relative;
display: block;
}
.uploads-content-post-image
{
margin: 0;
}
.uploads-content-post-image img
{
width: 100%;
height: 293px;
vertical-align: top;
}
.uploads-content-post-overlay
{
background: rgba(0,0,0, .4);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: none;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.uploads-content-post:hover .uploads-content-post-overlay
{
display: flex;
}
.uploads-content-post-like
{
width: 80px;
margin: 50%;
font-size: 18px;
font:100%;
margin-left: 100px;
font-weight: 100;
text-align: center;
display: inline-block;
}
#media screen and (max-width: 501px)
{
.uploads-content-post-image img
{
width: 100%;
height: 130px !important;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 14px;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 600px)
{
.uploads-content-post-image img
{
width: 100%;
height: 140px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 601px)
{
.uploads-content-post-image img
{
width: 100%;
height: 180px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 758px)
{
.uploads-content-post-like
{
margin: 50%;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 768px)
{
.uploads-wrapper
{
grid-gap: 3px;
}
.uploads-content-post-image img
{
width: 100%;
height: 220px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
margin: 50% !important;
font:auto;
}
}
Picture example
What I've noticed is that the .uploads-wrapper seems to be the main problem here. I am using PHP as a server side programming language, and just before I call the PHP's "while loop" to fetch more uploads, i've placed this:
<section class="uploads-wrapper" style="margin-top:10px;">
So to put it simple, I don't want the grid to break in to blank column as you can see in the picture/video example. I want it to work like Instagram's grid (I know Instagram's is 3, but I prefer 4 since it fits well in AdminLTE 3 template).
If you require additional information please let me know. I'd like to learn what the issue is here and hopefully i'll be able to fight it in the future if an issue like that or something similar appears in the future or so. Thank you guys for your time answers.
EDIT: As #Ben Souchet mentioned, the code after .uploads-wrapper is as follows:
<div class="uploads-content-post">
<a href="#">
<figure class="uploads-content-post-image">
<img alt src="example.jpg" class="img-fluid" decoding="auto" style="object-fit: cover;">
</figure>
<div class="uploads-media-type-icon-placeholder">
<span class="uploads-media-type-icon">
<i class="fas fa-heart"></i>
</span>
</div>
<span class="uploads-content-post-overlay">
<p>
<span class="uploads-content-post-like">0</span>
</p>
</span>
</a>
</div>
I also don't have a live website, it's in localhost.
Im currently working on making onesie scrolling website but i came accross the problem. I want my text be on the centre of first "page" but i cant make it to looks good on phone and desktop at the same time.
With padding-top: 50% it looks good at mobile but terrible at desktop, on the other hand padding-top: 7 looks good on desktop but not much at phone. Can someone help me finding the golden mean?
my html code:
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 50%;
padding-left: 15%;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
padding-top: 2%;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
padding-top: 2%;
padding-left: 5%;
padding-right: 15%;
}
<div class="main">
<section class="page1">
<h1>
ABOUT ME
<li class="notnav">
I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design
</li>
</h1>
<h2>
<a class="read-more" href='/about'>Read More</a>
</h2>
</section>
<section class="page2">
<h1>
PROJECTS
</h1>
</section>
<section class="page3">
<h1>
CONTACT
</h1>
</section>
</div>
Try this(without the use of media-query);Sorry late to the party
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
.page1{
display:flex;
min-height: 100%;
align-items: center;
text-align: center;
flex-direction: column;
justify-content:center;
}
h1 {
font-size: 8vw;
color: #efefef;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
clear: both;
}
Based on your code, here is example of adaption for section.page1 with Media queries. This is what you should use to make your code adapting and responsive.
#media screen and (min-width: 400px){
section {
width: auto;
height: auto;
}
section.page1{
padding: 20px;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 10px;
padding-left: 15%;
}
}
Here is a large explication about it : Mozilla Developper Using_media_queries
Get more practice and Examples with w3Schools
You can also use bootstrap to get easy css with their grid system : Bootstrap Grid
section {
width: 100%;
height: 100vh;
}
.main section.page1 {
background: #81D4FA;
}
.main section.page2 {
background: #F5F5F5;
}
.main section.page3 {
background: #81D4FA;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 50%;
padding-left: 15%;
}
h2
{
list-style-type: none;
font-size: 4vw;
color: #efefef;
text-align: center;
padding-top: 2%;
}
a.read-more{
border: 2px solid #efefef;
text-decoration: none;
color: inherit;
}
.notnav {
list-style-type: none;
font-size: 3vw;
padding-top: 2%;
padding-left: 5%;
padding-right: 15%;
}
#media screen and (min-width: 400px){
section {
width: auto;
height: auto;
}
section.page1{
padding: 20px;
}
h1 {
font-size: 8vw;
color: #efefef;
text-align: top;
padding-top: 10px;
padding-left: 15%;
}
}
<div class="main">
<section class="page1">
<h1>
ABOUT ME
</h1>
<div class="notnav">
I am John, 19 years old computer science student. Mainly coding in python, but I am quick lerner and flexible person. I am currently intrested in Artificial Intelligence, Big Data and Design
</div>
<h2>
<a class="read-more" href='/about'>Read More</a>
</h2>
</section>
<section class="page2">
<h1>
PROJECTS
</h1>
</section>
<section class="page3">
<h1>
CONTACT
</h1>
</section>
</div>
Hey guys I am trying to apply flexbox on my wordpress site.
Based on what I know Flexbox is a shorthand of "Flexible Box Layout Module", which is a CSS3 module, standardized by the World Wide Web Consortium.
So I don't have to install anything, compliant browsers support it natively but for some reason it won't work on my site: http://americanbitcoinacademy.com/course-list/
Currently I am using flex on my codes:
<div class="flex">
<div class="col-1-3">
<img src="http://americanbitcoinacademy.com/wp-content/uploads/2017/01/The-Bitcoin-Transaction-Landscape.jpg" />
<h3 style="text-align: center;">BC 101 - The Bitcoin Transaction COURSE</h3>
<p>This course covers the basics of what Bitcoin is and how the Blockchain works, how to use a Bitcoin Wallet and why Bitcoin is important.</p>
<button class="btn btn-block btn-primary">PURCHASE COURSE →</button>
</div>
</div>
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 2.5%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding-bottom: 0px;
font-family: 'Lato', Verdana;
}
.col-1-3 img {
width: 100%;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 15px auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
p{
line-height: 16px;
margin: 10px auto;
}
h4 {
margin: 0 0 20px 0;
}
}
.btn-block {
display: block;
width: 100%;
margin-top: 22px;
background: #DD374D;
}
button.btn-block{
background: #DD374D;
font-family: 'Roboto';
margin-bottom: 10px;
font-weight: bold;
}
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
.flex {
display: flex;
flex-wrap: wrap;
}
Which will do the trick to have equal size of the boxes NO MATTER HOW LONG IS THE CONTENT on that page by default.
Any idea why does the flexbox doesnt work?
Thank you in advance.
Your code works. You are probably not testing in a flex box capable browser:
http://caniuse.com/#search=flexbox
To align buttons to bottom:
.col-1-3 {
position: relative;
padding-bottom: 40px; /* offset height of button */
}
button.btn-block{
position: absolute;
bottom: 0px;
width: calc(100% - 20px);
}
I created a box here.
but the space is too much on the top and the bottom.
See image here:
How can I remove the extra spacing between top and bottom of the:
1.Title and the date
2. The button and the text
3. The button and the extra spacing below
Here's my HTML:
<div class="col-1-3"><img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="" />
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
<button class="btn btn-block btn-primary">Watch Video</button>
</a>
</div>
Here's my CSS:
h4 {
text-align: center;
}
.col-1-3 {
padding: 10px;
width: 28%;
float: left;
margin: 1%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
width: 100%;
}
.btn-block{
display: block;
width: 100%;
}
#media only screen and (max-width: 767px) {
.col-1-3 {width: 44%;}
}
#media only screen and (max-width: 590px) {
.col-1-3 {width: 94%;}
}
I just want to have enough space but this spacing are too much.
Make margin and padding 0 for all elements within div.col-1-3
check this snippets
h4 {
text-align: center;
}
.col-1-3 * {
padding: 0;
margin: 0;
}
.col-1-3 {
width: 28%;
float: left;
margin: 1%;
border: 1px solid #dedede;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.col-1-3 img {
width: 100%;
}
a {
margin: 0;
}
h3 {
margin: 0;
}
h4 {
margin: 0;
}
.btn-block {
display: block;
width: 100%;
}
#media only screen and (max-width: 767px) {
.col-1-3 {
width: 44%;
}
}
#media only screen and (max-width: 590px) {
.col-1-3 {
width: 94%;
}
}
<div class="col-1-3">
<img src="http://www.iliveaccountable.com/wp-content/uploads/2016/11/iliveaccountable.jpg" alt="">
<h3 style="font-family: 'Montserrat'; text-align: center;">TAKING IT TO THE SOURCE</h3>
<h4 style="font-family: 'Montserrat'; text-align: center;">11/13/2016</h4>
<p>
<a href="http://www.iliveaccountable.com/oldsite/iliveconnected-patterns/" target="_blank">
<button class="btn btn-block btn-primary">Watch Video</button>
</a>
</p>
</div>
Hope it helps
Create additional CSS rules for h3, h4 and btn-block in which you define settings for margin-top and margin-bottom. Start with value 0 for all and increase the values until you are satisfied with the result.
ADDITION after comments:
1.) you have an empty p tag between the image and the h3
2.) You have a CSS rule for all p tags with a bottom margin of 20px (on line 278 of "style.css")
I have a container that usually has a width of 400px. When the screen gets smaller, its width is reduced to 300px. These two values are static and don't change.
I have 3 buttons within this container. At the wider width, I'd like to have 2 side by side and the 3rd one on the line below. All of them are centered.
When the container is compressed, I'd like to have all the buttons stack on top of each other centered.
I can get it at the wide width but can't get it at the narrow width.
HTML:
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
</div>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
CSS:
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
display: inline-block;
margin-top: 10px;
}
.pg-3-buttons .prompt-gate-button {
float: left;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
.pg-sp2 > button {
}
.small-width {
width: 300px;
}
Fiddle: http://jsfiddle.net/je821vz9/10/
Used flex layout instead: http://jsfiddle.net/je821vz9/7/
Added this to .prompt-gate style and then cleaned up some of the conflicting HTML and CSS.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
You could use a media query and have the viewport size decided on how to display the elements.
I added the following css to your body:
body {
max-width:400px;
min-width:300px;
}
We can then add a media query to adjust how the items are laid out:
#media (max-width: 300px) {
div.pg-3-buttons .prompt-gate-button {
display:block;
float:none;
}
}
See an updated version of your example and scale down the width of your browser to see the items pop in to place at 300px.
Somehow figured it out... removed floats and moved around the button HTML so that they were all in the same container.
http://jsfiddle.net/je821vz9/19/
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
</div>
<style>
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
margin-top: 10px;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
</style>