I'm trying to slightly rewrite my application. I have in the past only created applications with Sidenavs, however now I don't need it in a website i'm working on. The issue is I can't seem to find a way to remove the sidenav container without it breaking the background image, the nav bar being sticky, etc. I can't seem to find anything on material.angular.io that refers to anything like this or can fix this.
If anyone knows how to remedy this issue please point me to the documentation/ what I can change to fix this.
Github for the site
With Mat-Sidenav-Container
Sidenav container as a div
div with css taken from the sidenav container
Here is a quick fix
app.component.html
<!-- <mat-sidenav-container fullscreen class="sidenav-container"> -->
<!-- <mat-toolbar class="toolbar"> -->
<!-- <div class="social-media" id="discord" (click)="navigateToDiscord()"> -->
<!-- <img src="../../assets/discord.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitch()"> -->
<!-- <img src="../../assets/twitch.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitter()"> -->
<!-- <img src="../../assets/twitter.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToYoutube()"> -->
<!-- <img src="../../assets/youtube.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="themeathon-name"> -->
<!-- <div class="name-span"> -->
<!-- <span>THEMEATHON</span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </mat-toolbar> -->
<!-- -->
<!-- <stream-component></stream-component> -->
<!-- -->
<!-- </mat-sidenav-container> -->
<div class="background">
<div class="toolbar">
<div class="social-media-container">
<div class="social-media" id="discord" (click)="navigateToDiscord()">
<img src="../../assets/discord.png">
</div>
<div class="social-media" (click)="navigateToTwitch()">
<img src="../../assets/twitch.png">
</div>
<div class="social-media" (click)="navigateToTwitter()">
<img src="../../assets/twitter.png">
</div>
<div class="social-media" (click)="navigateToYoutube()">
<img src="../../assets/youtube.png">
</div>
</div>
<div class="themeathon-name">
<div class="name-span">
<span>THEMEATHON</span>
</div>
</div>
</div>
<stream-component></stream-component>
</div>
Added css class .background at app.component.css
.background {
background-image: url(../../assets/japan.jpg);
}
.toolbar {
top: 0;
position: sticky;
position: -webkit-sticky;
z-index: 50;
width: 100%;
background-color: black;
height: 70px;
}
.social-media-container,
.themeathon-name {
position: absolute;
top: calc(50% - 16px);
}
.social-media {
padding-top: 6px;
margin: 0 25px;
cursor: pointer;
display: inline;
}
.social-media img {
fill: #fff;
width: 32px;
height: 32px;
}
.social-media-text {
float: right;
margin-left: 6px;
}
.themeathon-name {
width: 100%;
text-align: center;
}
.themeathon-name span {
font-family: SAMURAI, Roboto, "Helvetica Neue", sans-serif;
font-size: 32px;
color: #fff;
letter-spacing: 10px;
display: block;
margin: auto 26%;
}
Is that what you are after?
Here is the screen when I move down
Related
I am trying to make this image full size but why some space is remaining right side
CSS/HTML
/* Header */
.header {
background: url('https://picsum.photos/1920/1080') center center no-repeat;
background-size: cover;
}
.header .header-content {
padding-top: 15.5rem;
text-align: left;
}
.header .text-container {
margin-top: 3rem;
margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
<!-- start of header -->
<header id="header" class="header">
<div class="header-content"> //here give an class of that image
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
<p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
<a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
</div>
<!-- end of text-container -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<div class="image-container">
<img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
</div>
<!-- end of image-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of header-content -->
</header>
<!-- end of header -->
</div>
I want to set this full image right side(question mark)
which place need correction
add the width and height to body and html in head.
html,body {
width:100%;
height:100%
}
.img-fluid{
width:100%
height:100%
}
.image-container{
width:<!--as you wish--> 20px;
height:<!--as you wish--> 20px;
}
I have an HTML template and I need to make his left sidebar fixed (no scrolling) without using position: fixed because it ruins all the template.
<div class="layout-w">
<!-- menu -->
<div class="menu">
<!-- elements here -->
</div>
<!-- content -->
<div class="content">
<!-- Elements here -->
</div>
</div>
And this the css
.layout-w {
display: flex;
}
.menu {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
How can I accomplish this?
You could just put your menu div inside another div with height of 100% and background-color:transparent.
<div class="layout-w">
<!-- menu -->
<div class="menu-container">
<div class="menu">
<!-- elements here -->
</div>
</div>
<!-- content -->
<div class="content">
<!-- Elements here -->
</div>
and in css file:
.menu-container { height: 100%; background-color: transparent; }
.menu { postion: fixed }
I've created a WP site and on the homepage I've added a HTML widget with 3 columns. Everything is good except on mobile device the 3 columns are off to the right of the screen. I can't seem to center them when viewed on mobile as seen in the image below.
<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/> .
</figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<div class="wp-block-column twitterContainer">
<!-- wp:column -->
<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->
<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->
And my CSS:
.wp-block-column {
min-width: 220px;
max-width: 550px;
}
.wp-block-columns {
margin: 112px;
}
.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
}
Your column divs have maximum width 550px and the parent div has 112px margin. When the screen size is less than (550+120*2) = 790px, the columns are aligning right. To prevent this, use margin 0 when the screen size is less than 800px. Use the following CSS to do that.
#media only screen and (max-width: 800px) {
.wp-block-columns {
margin: 0px;
}
}
Currently your column cannot be less than 220 pixels wide:
.wp-block-column {
min-width: 220px;
}
And the margins of the parent block cause the left edge of the column to be 112 pixels from the left edge of the screen:
.wp-block-columns {
margin: 112px;
}
Due to these two circumstances, the right edge of the column begins to go too far to the right on a narrow screen.
If you just comment on this property, the column will decrease and remain in the center of the mobile phone. But in these keys it becomes unreadable.
You need to change the behavior of this column on a mobile device. On a narrow screen it should occupy almost the entire width of the screen.
For example:
.wp-block-column {
border: 2px solid #354063;
padding: 2px 10px;
margin: 0 auto;
min-width: 220px;
max-width: 80%;
width: 550px;
}
.wp-block-columns {
margin: 112px auto;
}
img {
max-width: 100%;
}
<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/> .
</figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->
<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></figure></div>
<!-- /wp:image --></div>
<!-- /wp:column -->
<div class="wp-block-column twitterContainer">
<!-- wp:column -->
<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->
<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->
you can adjust for mobile using this
#media only screen and (max-width: 600px) {
//your style goes here
body {
background-color: lightblue;
}
}
for more info visit w3school
I want to make a carousel like the one on this website:
https://debut-demo.myshopify.com/
The words stick with the picture it belongs to in the carousel.
I tried to use position: relative and position: absolute to make the words on the background.
1.My HTML
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<h2>title01</h2>
<img src="../src/images/background1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../src/images/background2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="../src/images/background3.jpg" alt="">
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
2.My SCSS
.swiper-container {
.swiper-slide {
max-height: 700px;
position: relative;
img {
-webkit-filter: brightness(.8);
width: 100%;
}
h2 {
top: 245px;
left: 100px;
font-size: 4.0625rem;
z-index: 20;
position: absolute;
}
}
}
enter image description here
enter image description here
So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page.
It normally looks like the first image in the album:
http://imgur.com/a/LHbRp
But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album.
Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album.
So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace?
-Chris
EDIT (some code):
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="shift.css">
</head>
<body>
<div id="wrapper">
<!-- Navbar stuff -->
<div class="nav">
<div class="container">
<ul class = "pull-left">
<li>Logo</li>
<li>Browse</li>
</ul>
<ul class = "pull-right">
<li>Sign Up/Login</li>
<li>Help</li>
</ul>
</div>
</div>
<!-- Main swipey thing -->
<div class ="jumbotron">
<div class ="container">
<h1>Blah blah blah</h1>
</div>
</div>
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container">
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container">
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<ul class="pull-right">
<li>Contact</li>
<li>About Us</li>
<li>Bug Tracking</li>
</ul>
</div>
</div>
</body>
And the css:
/*! Other stuff */
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/*! Navbar css */
.nav {
background-color: #DEB087;
border-bottom: 1px solid #DEB087;
}
.nav a {
color: #875D4B;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
}
.nav li {
display: inline;
}
/*! jumbotron */
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #DEB087;
font-size: 40px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
/*! Buy/Sell */
.portals {
background-color: #f7f7f7;
padding: 14px 10px;
border-bottom: 1px solid #dbdbdb;
float:none;
}
.buy-portal h3 {
font-size:20px;
}
.sell-portal h3 {
font-size:20px;
}
/*! Footer */
.footer {
background-color: #49484C;
}
.footer a {
color: #E8E5F2;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
}
.footer ul {
list-style-type: none;
}
please rename class container on your script HTML.
Before:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
After:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
and I also changed a little in class "jumbotron" you, hails like this:
.jumbotron {
background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0);
height: 500px;
text-align: center;
}
Result : Here on jsfiddle
Hope that helps.