I am testing a website styled by Flex in CSS. The problem is the website displayed well on the laptop, but not on mobile. Please refer to the image for more detail
Test environment: Chrome/Firefox/Safari, iphone 7, Macbook.
Any suggestion is very appreciated.
P/s: If anyone needs more detail in code, please comment.
EDIT
The code:
header.html
<mat-toolbar class="mat-elevation-z6 navbar" [ngClass]="{ compact: isHandset | async }">
<div class="logo">
<img src="/assets/images/logo.png" alt="" />
</div>
<!-- <span fxFlex></span> -->
<span class="title">{{ title }}</span>
<div>
<button mat-icon-button [matMenuTriggerFor]="userMenu">
<mat-icon>person</mat-icon>
</button>
<mat-menu #userMenu="matMenu">
<mat-list>
<mat-list-item>
<b>{{ useremail }}</b>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<button mat-menu-item (click)="logout()" translate>{{ 'Menu.Logout' | translate }}</button>
</mat-menu>
</div>
</mat-toolbar>
header.scss
.navbar {
position: fixed;
top: $zero;
left: $zero;
right: $zero;
display: flex;
justify-content: space-between;
background-color: $header-bg;
#include set-font(
$header-font-family,
$header-font-size,
$header-font-weight,
$header-font-style,
$header-text-color
);
.logo {
min-width: $header-logo-width-mobile;
height: $header-logo-height;
width: $header-logo-width;
img {
width: $w-100;
height: $h-100;
}
}
.menu-button {
margin-right: 1rem;
}
&.compact {
.logo {
height: $header-logo-height-mobile;
width: $header-logo-width-mobile;
}
}
}
info.html
<div class="game-info">
<div class="team">
<img src={{game_info.home_logo}} alt="overlayed img" />
</div>
...
<div class="team">
<img src= {{game_info.away_logo}} alt="overlayed img" />
</div>
</div>
info.scss
.game-info {
display: flex;
align-items: center;
justify-content: space-around;
max-height: 200px;
margin-bottom: 10px;
.team {
display: inline-flex;
width: 25%;
max-width: 100px;
max-height: 100px;
img {
max-width: 80%;
max-height: 80%;
}
}
}
I also created a stakblitz to play with:
https://stackblitz.com/edit/angular-s8tudg
For image deformation problem try adding both width: XX px; and height:XX px; with some value for mobile size media query #media or vice versa in large screen.
For header problem try adding the z-index: 1000; and flex-wrap: wrap to the header container and flex-container in a row. it may help.
Related
I made my navbar to stick to the top only when I scroll down. But again when I scroll up then it instantly gets to the bottom(it's previous position). I want my navbar to stick to the previous position when it's showing in the window. Here is my code-
HTML:
<section class="section-1">
<img class="logo" src="./Assets/Asset 2#3x.png" width="320" alt="Brand Icon">
<p class="description">Luxury Jewelry Store</p>
<nav class="navbar">
Home
My Cart
My Orders
FAQs
About Us
<div class="search">
<i class="fa-solid fa-magnifying-glass searchIcon"></i>
<input class="searchBox" placeholder="Search..." type="search">
<input type="submit" value="Search" class="searchButton">
</div>
</nav>
</section>
CSS:
.section-1{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.navbar{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background-color: #92A9BD;
position: absolute;
bottom: 0;
transition: all 0.3s;
z-index: 1;
}
.sticky{
position: fixed;
top: 0;
left: 0;
right: 0;
}
JS:
window.onscroll = function() {
const navbar = document.querySelector(".navbar");
if (window.pageYOffset > navbar.offsetTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
};
you just need to change the position from fixed to sticky
.sticky{position : sticky;
top:0;
left:0}
no need to mess with right;
As #harsh-deep and #Zeikman suggested, I removed the JS code and just used sticky as position-
.sticky {
position: sticky;
top: 0;
}
and in html file I added sticky to the nav element.
It was really simple! Thank You!
I have been trying to develop a product page for my website and I have three angles for my product images so I wanted to create a image gallery when you go to the page. The layout I am going with and the code I have so far is at this link https://jsfiddle.net/b1g2f8dh/ . My issue is I want this to be responsive so I want the .main-image img width to shrink with the page as it collapses until it gets to a min-width in which case the .angle-images div i want to shift below the main-image div and with the thumbnails laid out horizontally. My first issue is I cannot get the main image to resize despite i have width 100%. I would have thought it would scale it down as the parent container gets smaller. The second issue is I cannot figure out how to shift the second images beneath. I am getting my positions all mixed up that nothing seems to work! I plan to figure out some javascript so when you click the thumbnail it makes it the main image but thats a problem for another day ha! Any help would be appreciated. The full implementation of my code can be found here in case that helps https://www.printperry.com/home/product-page/index.php
<div class="product-images">
<div class="angle-images">
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li>
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</div>
<div class="main-image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: block;
}
.angle-images{
padding:5px 0px;
width: 120px;
display: inline-block;
float:left;
max-height: 700px;
}
.main-image{
width: 80%;
height: 600px;
float: left;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
float: right;
margin:5px 10px;
}
.main-image img {
width: auto;
height:700px;
}
There a couple of issues with your CSS preventing it from working as you desire. The height, width, max-width, values you have are working against each other in ways that aren't immediately apparent.
It works after making the modifications below.
Using flexbox for the layout mode makes it easy to switch between column and row layouts based on a media query.
.product-images{
max-height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-flow: column nowrap;
flex-direction: column-reverse;
}
#media (min-width: 768px) {
.product-images {
flex-flow: row nowrap;
}
}
.angle-images{
padding:5px 0px;
width: 120px;
max-height: 700px;
display: flex;
}
#media (min-width: 768px) {
.angle-images {
flex-flow: column nowrap;
}
}
.main-image{
width: 80%;
height: 600px;
margin: 10px;
}
.angle-images li{
list-style: none;
padding-top: 50px;
}
.angle-images img {
width: 100px;
margin:5px 10px;
}
.main-image img {
max-width: 100%;
}
Like Dan mentioned in his post, there were conflicting values. One of the issue I saw, was the size of the parent container, and the child container.
I am also learning as well, and one tip I would give you is try to use border-style to help you see visually, it makes problem solving more direct and easy.It really helps when you're working with multiple div container. Then play around with what you know, and try to see how to make it fit. I decided to give a stab at this, and came up with this version. You would have to use Flex unfortunately, it just made problem solving easier. The angle and main are responsive together for now unless you were trying to make just the main responsive only, please let me know so I can take some more time later and see if I further assist you, but for now this is what I have. I hope this leads you to the right path of whatever it is you're trying to achieve.
<div class="product-images">
<div class="angle-images">
<ul class="angle-ul">
<li class="angle-li angle-li-1">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class="angle-li angle-li-2">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
<li class=" angle-li angle-li-3">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</li>
</ul>
</div>
<div class="main-Image">
<img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
</div>
</div>
* {
margin: 0;
padding: 0;
}
.product-images {
height: 700px;
max-width: 700px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: warp;
border-style: dotted;
}
.angle-images {
width: 100px;
border-style: dotted;
}
.angle-ul {
}
.angle-li img {
width: 100%;
}
.main-Image img {
height: 100%;
width: 100%;
}
I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS
This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>
This is the render method of one of my components:
render() {
return (
<div className="left col-xs-12 col-md-6">
<Dropdown show={this.state.showDropdown}/>
{this.props.children}
</div>
);
}
It's just a div with a full screen dropdown menu, and some children. When showDropdown===true, the dropdown menu is shown. Now in one of the pages in which this component is used, the immediate child has a some issues with formatting, so I included a padding: 50px. This solved the issue. But now my Dropdown component also gets the padding of 50px, which moves my Dropdown Menu Items down and ruins the formatting of the Dropdown - but I don't know why? Is this normal behaviour?
CSS of the parent:
.left {
display: flex;
justify-content: center;
align-items: center;
// background-color: MediumSpringGreen;
background-color: $color_left;
height: auto;
min-height: 100vh;
z-index: 1;
#include media-breakpoint-up(md) {
height: 100vh;
}
}
Code of child
render() {
return (
<div className="row">
<Loader show={this.state.loading} />
<Left>
<div className="about_padding">
<p className="red big-box-text-two">Text text text</p>
<a className="menu-link statementbox" id="menu-statement" href="./pdf/statement.pdf" download="statement.pdf">
<p className="menu-link-text">our statement</p>
<img className="img-fluid download-img" src={imgDownload} alt="download"></img>
</a>
</div>
</Left>
}
CSS of the child:
.statementbox {
margin-top: 20px !important;
}
.about_padding {
padding-left: 15%;
padding-right: 15%;
//I was trying to add padding-top here, but it also pushes down my Dropdown
#include media-breakpoint-down(xs) {
padding-left: 10%;
padding-right: 10%;
}
}
Code of the Dropdown:
const Dropdown = ({show}) =>
<div className="dropdown"
style={{
visibility: show ? "visible" : "hidden",
opacity: show ? 1 : 0
}}>
<Link to="/">Home</Link>
<Link to="/menus/">Menus</Link>
<Link to="/about/">About us</Link>
<Link to="/contact/">Contact</Link>
</div>
CSS of the Dropdown:
.dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 40px;
background-color: #FFD826;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
a {
color: #f42528 !important;
}
}
I have a div-container, which has one main image and optional multiple smaller images: http://jsfiddle.net/h5kc8ybm/
The multiple smaller images are generated dynamically, so there can be just 1 or 10 of them. On my JFiddle you can see, that the images are just displayed in one single row.
What I want to achieve is, that there are filled up 'by colomns':
First image on top next to the main image (like shown in this example)
Second image below that (not right of it, like in the example)
Third image right of first image (top)
Fourth image below third image
...and so on.
Is it possible to do that just with CSS?
Update
To avoid misunderstanding: All smaller images should be positioned right of the main image. But these small images should be displayed in two rows, filled up from first row to second row.
The main div-element will never change its height, but only its width.
Example
HTML
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
LESS
.tnwrapper {
background-color: #f5f5f5;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: inline-block;
.tn {
display: inline-block;
vertical-align:top;
position: relative;
margin-right: 5px;
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail.child {
width: 40px;
}
}
}
I was able to do this with the following steps:
wrap the smaller children in a div and make it position:relative
apply position:absolute on even items and reposition them
float them left
http://jsfiddle.net/0neukb08/
The downside of this approach is that it hardcodes the image's size in the "reposition" step
Additionally, the reason I chose not to use flex-box here was this issue with growing its width (I also didn't like the highest voted answer), but flexbox is a good option if you know the container's width in advance.
You probably can do this by
Rotate the container -90deg and reflect it:
.tnwrapper {
...
transform: rotate(-90deg) scaleX(-1);
}
then apply the reverse transformation for the thumbnails:
.tnwrapper .tn {
...
transform: rotate(90deg) scaleX(-1);
}
JSFiddle: http://jsfiddle.net/h5kc8ybm/1/
Note though that the height limit of the container is now width, not height (because it was rotated -90deg.
CSS flexbox styling should do the trick:
.tnwrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 200px;
}
.tn:first-child {
height: 192px;
width: 192px;
}
<div class="tnwrapper">
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
<div class="tn">
<img src="http://placehold.it/96x96" alt="" class="thumbnail child">
</div>
</div>
EDIT: Sorry, the above snippet doesn't quite answer the question after all. This snippet places each subsequent image in left-to-right then top-to-bottom order, rather than top-to-bottom then left-to-right order as the question asked. I think adding a div around the first image would be the cleanest way to accomplish what you want.
I'm not quite clear on the order of the thumbnails but I think you wanta column format for those.
I that case wrap the main image and the thumbnails in separate divs and then flexbox can do the rest.
.wrap {
display: flex;
margin: 1em auto;
height: 280px;
}
.hero {
padding: 10px;
}
.sidekicks {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
.sidekicks .item {
width: 96px;
height: 96px;
margin: 10px;
background: lightblue;
line-height: 96px;
text-align: center;
}
<div class="wrap">
<div class="hero">
<img src="http://lorempixel.com/image_output/city-h-c-240-250-5.jpg" alt="" />
</div>
<div class="sidekicks">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
</div>
</div>
Codepen Demo
This is solution with flexbox and since you said that height of main-div wont change this should work http://jsfiddle.net/h5kc8ybm/13/
CSS
.tnwrapper {
background-color: #000;
padding: 5px 5px 5px 9px;
border-radius: 4px;
display: -webkit-flex;
display: flex;
}
.child-images {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 10px;
height: 170px;
}
.tnwrapper .tn .thumbnail {
padding: 4px;
margin: 10px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.child-images .tn img {
width: 40px;
}