could someone help me on this, thanks
I'm trying to create the layout identical to figure 2, but I'm not able to ...
How could i do a layout like the figure 2 using flex.
I create a board using flex but the items are not placed in correct way,
and i'm struggling to add a second line.
So far what I've managed to do is the following,
.collection-card {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 5;
flex-shrink: 5;
min-width: 50em;
max-width: 50em;
margin: 15px !important;
}
.grid-row-container {
display: grid;
grid-template-rows: auto auto;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
// padding: 10px;
}
.grid-item {
//background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
// padding-left: 5px;
// padding-right: 5px;
// font-size: 30px;
text-align: center;
}
.my-row {
display: flex;
}
.my-column {
flex: 50%;
}
<Card className='collection-card' interactive={true} onClick={() => history.push(getPath())}>
{/* my-row */}
<div className='tx-inverse tx-bold collection-title'>{name}</div>
<div className='grid-row-container '>
<div className='grid-container'>
<div className='grid-item'>ykykysdfsdfsdafsdfasdfsdf k</div>
<div className='grid-item'>aaaaaa k</div>
<div className='grid-item'>
<div className='collection-card-buttons '>
<button
type='button'
className='btn btn-primary icon-button field-inline card-forcewidth'
onClick={() => {
//setEntityModalOpen(true);
// history.push(`/objects/object-templates/${id}` + window.location.search);
}}
>
view
</button>
</div>
</div>
</div>
<div className='grid-container'>
<div className='grid-item'>aaaaaa k</div>
<div className='grid-item'>aaaaaa k</div>
</div>
</div>
</Card>
and ends up like this:
but what i need is the items placed like this,
In order to share the potential solution, I had to re-write the code to work with plain HTML/CSS. There is no right way to solve the layout issue but I have used flexbox and aligned the elements accordingly to achieve the desired layout. With this example, you should be able to recycle the CSS and add it to your specific project to work. Run the code snippet below and hope it helps!
p {
margin: 0;
padding: 0;
display: inline;
}
.user-container {
max-width: 750px;
border: 1px solid #545454;
border-radius: 15px;
margin: 0 auto;
padding: 2rem;
font-family: Arial, Helvetica, sans-serif;
}
.user-title {
display: block;
font-size: 1rem;
font-weight: 700;
margin: 0;
padding-bottom: 2rem;
}
.user-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid #545454;
border-radius: 15px;
font-size: 12px;
color: #6f6d6d;
}
.btn {
font-weight: 700;
line-height: 1;
font-size: 1rem;
text-transform: none;
padding: 10px 30px;
border: 1px solid #222222;
border-radius: 15px;
text-decoration: none;
color: #fff;
background-color: #222222;
}
.user-item__primary-button {
color: #fff;
background-color: #222222;
}
.user-item__secondary-button {
color: #222222;
background-color: transparent;
}
.w-50 {
width: 50%;
}
.text-ar {
text-align: right;
}
.align-center {
align-self: center;
}
.align-end {
align-self: end;
}
.pb-1 {
padding-bottom: 1rem;
}
.mr-1 {
margin-right: 1rem;
}
<section class="user-container">
<p class="user-title">Users List</p>
<div class="user-item">
<p class="user-item__email w-50 align-center">John Doe (john.doe#gmail.com)
<p>
<div class="w-50 text-ar align-center">
<p class="user-item__role mr-1">Admin</p>
<button class="user-item__primary-button btn">Button</button>
<button class="user-item__secondary-button btn">Button</button>
</div>
<div class="w-50">
<button class="user-item__secondary-button btn">Button</button>
</div>
<p class="user-item__detail w-50 text-ar align-end">Added Dec 01 2021 by Jane Doe</p>
</div>
<div class="user-item">
<p class="user-item__email w-50 align-center">John Doe (john.doe#gmail.com)
<p>
<div class="w-50 text-ar align-center">
<p class="user-item__role mr-1">Admin</p>
<button class="user-item__primary-button btn">Button</button>
<button class="user-item__secondary-button btn">Button</button>
</div>
<div class="w-50">
<button class="user-item__secondary-button btn">Button</button>
</div>
<p class="user-item__detail w-50 text-ar align-end">Added Dec 01 2021 by Jane Doe</p>
</div>
</section>
I am a junior developer and I am trying to create a cart page design for a store.
As you can see in the screenshots, I have completed the majority in desktop design.
The design I have to do: https://gyazo.com/2de152ba832ad4fafffa78d6900c6a67
The design I made: https://gyazo.com/ad387f7c61db2c355765ceaec1f29983
But I cannot create the desired structure in mobile design.
The design I have to do: https://gyazo.com/849bbb190fc312460c16254a322b5d0f
The design I made: https://gyazo.com/5569721f101b34f3530fcbe368fce5fd
How can I code the mobile design as desired?
You can also check it from the link.
https://bee-and-you-development.myshopify.com/cart
HTML
{{ 'cart.scss.css' | asset_url | stylesheet_tag }}
<div class="cart">
<div class="container">
<div class="b_cart">
<div class="cart__items">
<h2 class="fs-20 fw-b tt-u pb-30">Ihr Warenkorb</h2>
<div class="cart__products">
<div class="cart__row cart__header bb--grey fs-14">
<div class="f-2"></div>
<div class="f-5">Artikel</div>
<div class="f-3">Preis</div>
<div class="f-2">Menge</div>
<div class="f-1">Summe</div>
<div class="f-1"></div>
</div>
<div class="cart__product cart__row bb--grey middle">
<div class="cart__productImage"><img style="max-height: 100px; align-content: center;" src="https://cdn.shopify.com/s/files/1/0306/6557/2492/products/13.jpg?v=1578655357" alt=""></div>
<div class="cart__productTitle f-5 fw-b px-1">Gelée Royale Blütenpollen Propolis (Kautabletten)</div>
<div class="cart__productPrices f-3 px-1"><span class="fw-b">€63,91</span> <span class="fw-b td-o fc-g">€63,91 </span><br /> <span class="fw-b fc-g fs-12 ta-r">€536,72/kg</span></div>
<div class="cart__productQty f-2 px-1">Menge</div>
<div class="cart__productPrice f-1 fw-b px-1">€127,91</div>
<div class="cart__productDelete f-1 ta-r">X</div>
</div>
<div class="cart__row bb--grey">
</div>
<div class="cart__row bb--grey">
</div>
</div>
<div>
Weiter einkaufen
</div>
</div>
<div class="cart__summary fw-b">
<h2>Gesamtsumme</h2>
<div class="cart__price">
<div class="cart__row">
<div>Zwischensumme</div>
<div>€172,56</div>
</div>
<div class="cart__row red">
<div>Rabatt</div>
<div>€8,56</div>
</div>
<hr />
<div class="cart__row">
<div class="cart__priceText">Summe</div>
<div class="cart__priceNumber fs-20">€163,91</div>
</div>
<div class="cart__row fs-12 pb-30">
<div>Kostenloser versand ab €34,99</div>
</div>
</div>
<div class="cart__checkboxes">
<div class="cart__agreement pb-10"><input type="checkbox" class="input-checkbox limoniapps-discountninja-checkout-checkbox" value="1" data-message="{{ section.settings.sales_agreement_message}}" >{{ section.settings.sales_agreement_text}}</div>
<div class="cart__marketing">
<div><input type="checkbox" class="input checkbox allow-marketing" /></div>
<div>Bitte halten Sie mich per E-Mail und Text-Nachrichten über Neuigkeiten und exklusive Angebote auf dem Laufenden.</div>
</div>
</div>
<div class="cart__checkout">
<div>
<input class="cart__checkoutButton button fw-b" type="submit" name="checkout"value="{{ section.settings.checkout }}">
</div>
</div>
</div>
</div>
</div>
</div>
SASS
.b_cart {
display: flex;
min-height: 100%;
h2 {
margin: 0;
}
.button {
display: block;
width: 100%;
border: none;
padding: 10px;
cursor: pointer;
text-align: center;
}
.cart__items {
flex: 8;
padding: 30px;
/* debug */
height: 300px;
}
.cart__productImage{
flex: 2;
}
.cart__productTitle{
flex: 5;
}
.cart__header {
font-size: 14px;
font-weight: bold;
}
.cart__summary {
flex: 4;
padding: 30px;
border: 1px solid #ADADAD;
/* debug */
}
.cart__row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.cart__checkboxes{
font-size: 12px;
}
.cart__products {
margin: 0;
}
.cart__marketing{
display: flex;
margin-top: 10px;
}
.bb--grey {
border-bottom: 1px solid #adadad;
}
.cart__price {
padding-top: 20px;
}
.cart__productImage{
height: 100px;
}
.cart__checkout{
padding-top: 20px;
}
.cart__checkoutButton{
font-weight: bold;
text-transform: uppercase;
background-color: #ffd500;
border-style: none;
border-radius: 25px;
}
.cancelIcon{
background: url('https://cdn.shopify.com/s/files/1/0306/6557/2492/files/cancel.png?v=1605348792');
height: 40px;
width: 40px;
}
.px-1 {
padding-left: 5px;
padding-right: 5px;
}
.f-1 {
flex: 1;
}
.f-2 {
flex: 2;
}
.f-3 {
flex: 3;
}
.f-4 {
flex: 4;
}
.f-5 {
flex: 5;
}
.fs-12 {
font-size: 12px;
}
.fs-14 {
font-size: 14px;
}
.fs-20 {
font-size: 20px;
}
.fw-b {
font-weight: bold;
}
.fc-g {
color: #adadad;
}
.middle{
margin-top: auto;
margin-bottom: auto;
}
.ta-r {
text-align: right;
}
.ta-l {
text-align: left;
}
.td-o{
text-decoration: line-through;
}
.pb-10 {
padding-bottom: 10px;;
}
.pb-30 {
padding-bottom: 30px;;
}
.tt-u {
text-transform: uppercase;
}
.red {
color: #FF0102;
}
}
#media screen and (max-width: 992px) {
.b_cart {
display: block;
.cart__summary {
margin-top: 25px;
padding: 0px;
border: none;
}
.cart__row {
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.cart__header{
display: none;
}
.cart__items {
padding: 0px;
}
.cart__productImage{
flex: 4;
}
.cart__productTitle{
flex: 8;
}
}
}
I would appreciate it if you could support, thank you.
Given the following scenario:
Angular 1.7.2
Bootstrap 3
I am having some issues after the user clicks on the img:
WHAT I AM GETTING
Clicking on any img, a related modal windows pops up with the right content
click IMG 1: all works fine
click IMG 2/3/4: pills are not working
Clicking on tabs of IMG'S MODAL 2/3/4 and then clicking on on IMG's 1 the
pills are showing the content of last click from 2/3/4 related to IMG 1.
eg. if I click on IMG 4 - TAB 3 and then I click to IMG 1 I am getting the content of IMG 1 TAB 3 even if I am on TAB 1
WHAT I DESIRE TO GET
Clicking on any img, a related modal windows pops up with the right content and related specific pills
ISSUE MIGHT COME FROM
I assume that the described issue is coming from the id of the pills which remains the same on each modal.
I don't want/can not use: angular-ui.github.io/bootstrap/#!#modal
to solve the issue
var app = angular.module('app', ['ngSanitize']);
app.controller('MainController', ['$scope',
function($scope){
$scope.mainTitle = 'MEET THE TEAM',
$scope.headLine = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
$scope.teamSection = 'EXECUTIVE TEAM',
$scope.modals = [
{
bio: "TAB 1",
experience: "TAB 2",
motto: "TAB 3"
}
];
$scope.teams = [
{
name : 'name1',
role : 'role1',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here1',
author : 'some more text1',
mobile: 'READ MORE'
},
{
name : 'name2',
role : 'role2',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here2',
author : 'some more text2',
mobile: 'READ MORE'
},
{
name : 'name3',
role : 'role3',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here3',
author : 'some more text3',
mobile: 'READ MORE'
},
{
name : 'name4',
role : 'role4',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here4',
author : 'some more text4',
mobile: 'READ MORE'
}
];
}]);
body,
html {
margin: 0;
padding: 0;
font-family: Montserrat;
height: 100%;
}
.p0 {
padding: 0;
}
.container {
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 35px;
padding-bottom: 20px;
}
h2 {
text-align: center;
font-size: 15px;
line-height: 150%;
padding-bottom: 50px;
}
h3 {
text-align: center;
font-size: 14px;
font-weight: 600;
}
.flex-parent {
display: flex;
width: 100%;
height: 50px;
align-items: center;
padding: 50px 0;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #e3e3e3;
border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 150%;
color: #777777;
letter-spacing: 3px;
}
.flex-parent-second {
height: 150px;
}
.person {
text-align: center;
margin-bottom: 50px;
}
.person img {
cursor: pointer;
}
.name {
font-size: 15px;
margin-top: 10px;
padding-bottom: 8px;
letter-spacing: 3px;
line-height: 150%;
}
.role {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
line-height: 150%;
}
.line {
width: 50px;
height: 1px;
background-color: #e3e3e3;
}
.modal-header {
border-bottom: 0;
}
.roundProfile {
margin: 0 auto;
text-align: center !important;
}
.roundProfile img {
max-width: 150px;
margin-bottom: 15px;
}
hr {
max-width: 30%;
}
.modal-open .modal {
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
background-image: url(../images/e.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 0 10px #e3e3e3;
border: none;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #b04890;
font-weight: 500;
color: #ffffff !important;
}
.modal-body {
padding: 0 50px 50px;
}
.nav-pills {
text-align: center;
margin: 30px 0;
}
.nav-pills>li {
text-align: center;
float: none;
display: inline;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
}
.nav>li>a {
display: inline;
padding: 5px 15px;
}
.tab-content p {
font-size: 13px;
line-height: 200%;
text-align: center;
padding-left: 15px;
font-weight: 400;
}
.author {
font-style: italic;
display: block;
text-align: center;
font-size: 11px;
margin-top: 20px;
}
.flex-parent {
padding: 0 0 50px 0;
}
.fade {
opacity: 1 !important;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5 !important;
}
#media (max-width:767px) {
.red-more-mobile {
font-size: 10px;
position: relative;
bottom: 20px;
background-color: rgba(255, 255, 255, 0.80);
padding: 5px 0;
letter-spacing: 2px;
margin-bottom: -20px;
}
.container {
padding-left: 0;
padding-right: 0;
}
.modal-body {
padding: 0px 20px 20px 20px;
}
.nav>li>a {
display: inline;
padding: 2px 5px;
}
.nav-pills>li {
letter-spacing: 1px;
}
.name {
font-size: 10px;
}
.role {
font-size: 9px;
}
h2 {
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.flex-parent {
padding: 0;
}
.flex-parent-second {
position: relative;
top: 0px;
height: 50px;
margin-bottom: 50px;
}
}
<!doctype html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Include the AngularJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="js/respond.js"></script>-->
</head>
<body ng-app="app">
<div class="container" ng-controller="MainController">
<h1>{{ mainTitle }}</h1>
<h2>{{ headLine }}</h2>
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">
<h3>{{ teamSection }}</h3>
</div>
<div class="flex-child-edge"></div>
</div>
<div class="main" ng-repeat="team in teams">
<!-- PERSON 1 -->
<div class="col-xs-6 col-md-3 col-sm-4 person">
<img ng-src="{{ team.mainImage }}" class="img-responsive center-block fade" alt="{{team.alt}}" data-toggle="modal" data-target="#person{{$index}}" />
<div class="red-more-mobile visible-xs" data-toggle="modal" data-target="#person{{$index}}">{{team.mobile}}</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
</div>
<!-- Modal -->
<div class="modal " id="person{{$index}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="roundProfile row">
<div class="col-xs-12">
<img ng-src="{{ team.roundImage }}" class="img-responsive img-circle center-block" alt="" />
</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
<hr>
</div>
<div class="modal-body" ng-repeat="modal in modals">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">{{modal.bio}}</a></li>
<li><a data-toggle="pill" href="#menu1">{{modal.experience}}</a></li>
<li><a data-toggle="pill" href="#menu2">{{modal.motto}}</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane in active">
<p ng-bind-html="team.bio"></p>
</div>
<div id="menu1" class="tab-pane ">
<p>{{ team.experience }}</p>
</div>
<div id="menu2" class="tab-pane ">
<p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
from your question, I assume , the modals are opening correctly but the pills are behaving indifferently. The reason for this is you have same id's for the tabs inside all the modals.
<div class="tab-content">
<div id="home" class="tab-pane in active">
<p ng-bind-html="team.bio"></p>
</div>
<div id="menu1" class="tab-pane ">
<p>{{ team.experience }}</p>
</div>
<div id="menu2" class="tab-pane ">
<p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
</div>
</div>
Changing the ids to something like menu1_{{$index}} and their links accordingly can fix your problem.
But ideally I think you should re-think the architecture for this to be some clean and maintainable code. I would suggest something like, keeping a single modal on the dom and dynamically load the contents you need, on click of any image.
WHAT I HAVE DONE TO SOLVE IT:
Removed ng-repeat="modal in modals" from modal-body
Tab's name has been hardcoded
Used ...{{$index}} as per above modal and #Anees user suggestion
var app = angular.module('app', ['ngSanitize']);
app.controller('MainController', ['$scope',
function($scope){
$scope.mainTitle = 'MEET THE TEAM',
$scope.headLine = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
$scope.teamSection = 'EXECUTIVE TEAM',
$scope.modals = [
{
bio: "TAB 1",
experience: "TAB 2",
motto: "TAB 3"
}
];
$scope.teams = [
{
name : 'name1',
role : 'role1',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here1',
experience : 'experience text here1',
author : 'some more text1',
mobile: 'READ MORE'
},
{
name : 'name2',
role : 'role2',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here2',
experience : 'experience text here2',
author : 'some more text2',
mobile: 'READ MORE'
},
{
name : 'name3',
role : 'role3',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here3',
experience : 'experience text here3',
author : 'some more text3',
mobile: 'READ MORE'
},
{
name : 'name4',
role : 'role4',
mainImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
roundImage : 'https://www.m5hosting.com/wp-content/uploads/no-profile-img.gif',
bio : 'bio text here4',
experience : 'experience text here4',
author : 'some more text4',
mobile: 'READ MORE'
}
];
}]);
body,
html {
margin: 0;
padding: 0;
font-family: Montserrat;
height: 100%;
}
.p0 {
padding: 0;
}
.container {
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 35px;
padding-bottom: 20px;
}
h2 {
text-align: center;
font-size: 15px;
line-height: 150%;
padding-bottom: 50px;
}
h3 {
text-align: center;
font-size: 14px;
font-weight: 600;
}
.flex-parent {
display: flex;
width: 100%;
height: 50px;
align-items: center;
padding: 50px 0;
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #e3e3e3;
border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 150%;
color: #777777;
letter-spacing: 3px;
}
.flex-parent-second {
height: 150px;
}
.person {
text-align: center;
margin-bottom: 50px;
}
.person img {
cursor: pointer;
}
.name {
font-size: 15px;
margin-top: 10px;
padding-bottom: 8px;
letter-spacing: 3px;
line-height: 150%;
}
.role {
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
line-height: 150%;
}
.line {
width: 50px;
height: 1px;
background-color: #e3e3e3;
}
.modal-header {
border-bottom: 0;
}
.roundProfile {
margin: 0 auto;
text-align: center !important;
}
.roundProfile img {
max-width: 150px;
margin-bottom: 15px;
}
hr {
max-width: 30%;
}
.modal-open .modal {
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
background-image: url(../images/e.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 0 10px #e3e3e3;
border: none;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #b04890;
font-weight: 500;
color: #ffffff !important;
}
.modal-body {
padding: 0 50px 50px;
}
.nav-pills {
text-align: center;
margin: 30px 0;
}
.nav-pills>li {
text-align: center;
float: none;
display: inline;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
}
.nav>li>a {
display: inline;
padding: 5px 15px;
}
.tab-content p {
font-size: 13px;
line-height: 200%;
text-align: center;
padding-left: 15px;
font-weight: 400;
}
.author {
font-style: italic;
display: block;
text-align: center;
font-size: 11px;
margin-top: 20px;
}
.flex-parent {
padding: 0 0 50px 0;
}
.fade {
opacity: 1 !important;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5 !important;
}
#media (max-width:767px) {
.red-more-mobile {
font-size: 10px;
position: relative;
bottom: 20px;
background-color: rgba(255, 255, 255, 0.80);
padding: 5px 0;
letter-spacing: 2px;
margin-bottom: -20px;
}
.container {
padding-left: 0;
padding-right: 0;
}
.modal-body {
padding: 0px 20px 20px 20px;
}
.nav>li>a {
display: inline;
padding: 2px 5px;
}
.nav-pills>li {
letter-spacing: 1px;
}
.name {
font-size: 10px;
}
.role {
font-size: 9px;
}
h2 {
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
.flex-parent {
padding: 0;
}
.flex-parent-second {
position: relative;
top: 0px;
height: 50px;
margin-bottom: 50px;
}
}
<!doctype html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Include the AngularJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.5/angular-sanitize.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="js/respond.js"></script>-->
</head>
<body ng-app="app">
<div class="container" ng-controller="MainController">
<h1>{{ mainTitle }}</h1>
<h2>{{ headLine }}</h2>
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">
<h3>{{ teamSection }}</h3>
</div>
<div class="flex-child-edge"></div>
</div>
<div class="main" ng-repeat="team in teams">
<!-- PERSON 1 -->
<div class="col-xs-6 col-md-3 col-sm-4 person">
<img ng-src="{{ team.mainImage }}" class="img-responsive center-block fade" alt="{{team.alt}}" data-toggle="modal" data-target="#person{{$index}}" />
<div class="red-more-mobile visible-xs" data-toggle="modal" data-target="#person{{$index}}">{{team.mobile}}</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
</div>
<!-- Modal -->
<div class="modal " id="person{{$index}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="roundProfile row">
<div class="col-xs-12">
<img ng-src="{{ team.roundImage }}" class="img-responsive img-circle center-block" alt="" />
</div>
<div class="name">{{ team.name }}</div>
<div class="role">{{ team.role }}</div>
<hr>
</div>
<div class="modal-body">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home{{$index}}">TAB 1</a></li>
<li><a data-toggle="pill" href="#menu1{{$index}}">TAB 2</a></li>
<li><a data-toggle="pill" href="#menu2{{$index}}">TAB 3</a></li>
</ul>
<div class="tab-content">
<div id="home{{$index}}" class="tab-pane in active">
<p ng-bind-html="team.bio"></p>
</div>
<div id="menu1{{$index}}" class="tab-pane ">
<p>{{ team.experience }}</p>
</div>
<div id="menu2{{$index}}" class="tab-pane ">
<p>{{ team.motto }}<span class="author">{{ team.author }}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Please help to convert the below markup to be responsive across various screens using media queries, also please feel free to update the styles for the mark up where ever required:
Outstanding concerns with the below code are:
Code is not responsive
Styles break specially with in the date and time section of the
markup. Specifically, these css classes break across the screen
.downtime-styles & .date-container & .date-range & .date-month &
.date-time & .date-day classes specified below in the CSS
.downtime-styles{
text-align: center;
padding-bottom: 30px;
color: #007599;
font-family: Univers LT W01_55 Roman1475956,Arial,serif;
}
.date-container {
display: inline-block;
text-align: center;
color: #007599;
font-family: Univers LT W01_55 Roman1475956,Arial,serif;
}
.date-range {
height: 100%;
display: flex;
padding-left: 15px;
-webkit-box-pack: center;
justify-content: left;
-webkit-box-align: center;
align-items: center;
}
.date-month {
width: 100%;
font-size: 14px;
text-transform: uppercase;
padding-top: 30px;
margin: 0;
}
.date-time {
width: 100%;
font-size: 14px;
text-transform: uppercase;
padding-top: 0px;
margin: 0;
}
.date-day {
font-size: 24px;
padding-bottom: 0px;
margin-bottom: 0;
}
.div-div {
padding-top: 20px;
padding-left: 40px;
font-size: 100%;
font: inherit;
}
.main-div{
position: relative;
margin-top: 10px;
display: flex;
margin-right: 0px;
margin-left: 0px;
height: 125px;
border: 1px solid #A9A9A9;
border-radius: 12px;
overflow: hidden;
background-color: #f8f8f8;
}
.main-div-summary{
position: relative;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
height: 125px;
border: 1px solid #A9A9A9;
border-radius: 12px;
background-color: #f8f8f8;
}
.main-box{
background-color: #2cbc85;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 30px;
}
.p-box{
transform-origin: 0 50%;
position: absolute;
font-weight: bold;
top: 0;
bottom: 0;
height: 30px;
line-height: 30px;
margin: auto;
transform: rotate(-90deg) translate(-50%,50%);
color: black;
text-transform: uppercase;
font-size: 16px;
font-family: Univers LT W01_65 Bold1475968,Arial,serif;
}
.title-class{
font-size: 20px;
}
.pipeline-item-section{
height: 100%;
padding-top: 15px;
padding-left: 70px;
padding-bottom: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #000f2b;
font-family: Univers LT W01_45 Light1475944,Arial,serif;
}
.light-font{
font-weight: normal;
margin: 0px;
font-weight: 100;
font-family: Arial;
}
<div class="row main-div">`enter code here`
<div class="main-box">
<p class="p-box"><span>COMPLETE</span></p>
</div>
<div class="col-xs-3 text-right pipeline-item-section">
<p class="title-class"><span>TITLE OF EVENT</span></p>
</div>
<div class="col-xs-3 pipeline-item-section">
<p class="title-class"><a class="hyperlink-
text">XYZLMNOP</a></p>
<div>
<p class="light-font"><span>Name: </span>ABC</p>
<p class="light-font"><span>Type: </span>XYZ</p>
</div>
</div>
<div class="col-xs-3 pipeline-item-section">
<p class="title-class">Users Notified: <a
class="hyperlink-text">4</a></p>
<div>
<p class="light-font"><span>Impacted Count: </span>
<span>3</span></p>
<p class="light-font"><span>Impacted List: </span>
<span>1</span></p>
</div>
</div>
<div class="col-xs-3 date-range">
<div class="div-div">
<div class="date-container">
<p class="date-month">JUNE</p>
<p class="date-day">2</p>
<p class="date-time">10 AM</p>
</div>
<i class="fa fa-long-arrow-right"></i>
<div class="date-container">
<p class="date-month">JUNE</p>
<p class="date-day">3</p>
<p class="date-time">12 PM</p>
</div>
<div class="downtime-styles"><span>Downtime:
</span>2 hours</div>
</div>
<div class="button-styles btn-group flex-btn-group-
container">
<button type="submit" replaceUrl="true">
<span class="fa fa-remove"></span>
</button>
<button type="submit" replaceUrl="true">
<span class="fa fa-pencil"></span>
</button>
</div>
</div>
</div>
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"