This may seem basic but i am unable to align text top left .The text is inside a container
not sure what values to add in main_styles.css to align top left . Here is the main_styes.css
.home_title h1
{
font-size: 30px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
}
.home_title h1 span
{
color: #eeff2d;
font-size: 30px;
Hi djboziah, two things:
1 – When you post code; select the pasted code and press the </> button to format as code.
2 – post all relevant code for the issue, both HTML and CSS.
Your question can’t be answered until you post at least the HTML that the posted CSS is styilng. 
The element should naturally be in the top left assuming no other HTML or styles apply to it.
I assume you are not talking about the default top margin on the h1 are you? If so set margin-top:0 to remove it.
If that is not your problem then we will need the HTML to go with your styles as Erik said above
Top and left are relative concepts. Paul content inside a container defaults to top left…of course, this might seem offset by the padding and margin of the containers-- and some elements have padding and margin set in the default style ( Hx, P, UL, and LI for example). Also you may be cascading padding and or positioning from more general rules in your stylesheet.
Taking the code provided at face value, try adding margin:0; padding:0; to
.home_title h1
Hope that helps.
Thank you for you help, but that did not work.
I’m afraid that you will need to post code that demonstrates your problem.
Otherwise we could be guessing all day
How did you try that?
Please post relevant code, at least the html that the CSS is meant to style.
N.B. You are now able to attach/upload a file if you want to give us a working stand alone that shows the issue.
<!-- Header -->
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<div class="header_content d-flex flex-row align-items-center justify-content-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">Play Kenyan Music</span>
</a>
</div>
<!-- Main Navigation -->
<nav class="main_nav">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li class="active"><a href="index.html">Home | </a><a href="artists.html">Artists</a><a href="index.html"> | </a><a href="Download.html">Download</a><a href="index.html"> | </a><a href="blog.html">Albums</a><a href="index.html"> | </a><a href="blog.html">Shows</a><a href="index.html"> | </a><a href="blog.html">Tours </a><a href="index.html">|</a><a href="blog.html">Festivals</a><a href="index.html"> | </a><a href="blog.html">News</a><a href="index.html"> | Shop | Extended Packs | Co</a><a href="contact.html">n</a><a href="index.html">tact</a></li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
</ul>
</nav>
<!-- User area -->
<div class="log_reg d-flex flex-row align-items-center justify-content-start">
<ul class="d-flex flex-row align-items-start justify-content-start">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
<!-- Hamburger -->
<div class="hamburger d-flex flex-column align-items-end justify-content-between"><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Menu -->
<div class="menu">
<div class="menu_container">
<div class="menu_background"></div>
<div class="menu_close"><i class="fa fa-times" aria-hidden="true"></i></div>
<div class="menu_content d-flex flex-column align-items-center justify-content-start">
<nav class="menu_nav">
<ul class="d-flex flex-column align-items-center justify-content-start">
<li><a href="index.html">Home</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="#">Download Music</a></li>
<li><a href="blog.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Home -->
<div class="home">
<!-- Home Slider -->
<div class="home_slider_container">
<div class="owl-carousel owl-theme home_slider">
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>Sauti Sol - <span>Suzanna.</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>Nadia Mukami - <span>Jipe</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slide -->
<div class="slide">
<div class="background_image" style="background-image:url(images/index.jpg)"></div>
<div class="home_container">
<div class="container">
<div class="row">
<div class="col">
<div class="home_content">
<div class="home_title_container text-center">
<div class="home_title islive text-center"><h1>NaiBoi Ft Kemunto - <span>Ready.</span></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Home Slider Navigation -->
<div class="home_slider_nav"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<!-- Home Social -->
<div class="home_social">
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="home_social_text">follow</div>
<div class="home_social_list">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<!-- Scroll Down -->
</div>
</div>
<!-- Song -->
<div class="song">
<div class="parallax_background parallax-window" data-parallax="scroll" data-image-src="images/song.jpg" data-speed="0.8"></div>
<div class="container">
<div class="row">
<div class="col">
<div class="song_content">
<!-- Player -->
<div class="single_player_container">
<div class="single_player d-flex flex-row align-items-center justify-content-start">
<div id="jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-gui jp-interface d-flex flex-lg-row flex-column align-items-start justify-content-start">
<!-- Player Controls -->
<div class="player_controls_box d-flex flex-row align-items-start justify-content-start">
<div class="order-lg-1 order-2">
<div class="player_title">song of the week</div>
<div class="jp-controls-holder player_controls ml-auto d-flex flex-row align-items-start justify-content-start">
<button class="jp-play player_button" tabindex="0"></button>
<button class="jp-stop player_button" tabindex="0"></button>
</div>
</div>
<div class="song_image ml-lg-auto order-lg-2 order-1"><img src="images/song_1.jpg" alt=""></div>
</div>
<!-- Progress Bar -->
<div class="player_bars d-flex flex-row align-items-start justify-content-start">
<div class="player_progress_box">
<div class="jp-current-time" role="timer" aria-label="time">00:00</div>
<div class="song_info">
<div class="jp-artist" aria-label="title">Sauti SOL - Suzanna - <a href="files/SautiSolSuzanna.mp3">Download</a></div>
<div class="jp-title" aria-label="title"></div>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div>
<div class="jp-play-bar"><span></span></div>
</div>
</div>
</div>
<div class="jp-duration ml-auto" role="timer" aria-label="duration">02:33</div>
</div>
<!-- Volume Controls -->
<div class="jp-volume-controls ml-lg-auto">
<div class="mute_button">
<button class="jp-mute" tabindex="0"></button>
</div>
<div class="d-flex flex-row align-items-center justify-content-start">
<div class="jp-volume-bar">
<div>
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app">
<div class="container">
<div class="row row-lg-eq-height">
<!-- App Content -->
<div class="col-lg-6 order-lg-2 order-1">
<div class="app_content d-flex flex-column align-items-start justify-content-center">
<div class="section_title"><h1>Get Your Music Right Now!</h1></div>
<div class="app_text">
<p>Listen, Share and Download all your Kenyan Music! </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured -->
<div class="featured">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title text-center"><h1>Featured Albums</h1></div>
<div class="featured_list">
<div id="jplayer_2" class="jp-jplayer"></div>
<div id="jp_container_2" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- News -->
<div class="news">
<div class="container">
<div class="row">
<div class="col">
<div class="section_title"><h1>Latest News</h1></div>
</div>
</div>
<div class="row news_row">
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/keimage cool.JPG" alt="" width="300" height="300"></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Juy 19, 2021</a></div>
<div class="news_post_title"><a href="#">Afrima Music Awardsl</a></div>
<div class="news_post_text">
<p>Afrima and other Music Awards</p>
</div>
</div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_bottom d-flex flex-column align-items-start justify-content-start">
<div class="news_post_content order-md-1 order-2">
<div class="news_post_date"><a href="#">Feb 19, 2021</a></div>
<div class="news_post_title"><a href="#">Rugby Festival Info 2021</a></div>
<div class="news_post_text">
<p>Rugby Festival and other Upcoming Festivals </p>
</div>
</div>
<div class="news_post_image order-md-2 order-1"><img src="images/featured_4.jpg" alt="" width="300" height="300"></div>
</div>
</div>
<!-- News Post -->
<div class="col-xl-4 col-md-6">
<div class="news_post image_top">
<div class="news_post_image"><img src="images/featured_news.jpg" alt="" width="300" height="300"></div>
<div class="news_post_content">
<div class="news_post_date"><a href="#">Oct 19, 2021</a></div>
<div class="news_post_title"><a href="#">New album release in 2021</a></div>
<div class="news_post_text">
<p>UPcoming Album Releases</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="newsletter">
<div class="container">
<div class="row">
<!-- Newsletter Content -->
<div class="col-xl-6">
<div class="newsletter_content">
<div class="section_title"><h1>Subscribe & Follow</h1></div>
<div class="newsletter_text">
<p>Please Sbscribe for latest Updates on Music, Albums, Festivals, Music Charity and Much More.</p>
</div>
</div>
</div>
<!-- Newsletter Form -->
<div class="col-xl-6 nl_col">
<div class="newsletter_form_container d-flex flex-column align-items-start justify-content-end">
<form action="#" class="newsletter_form" id="newsletter_form">
<div class="d-flex flex-row align-items-start justify-content-between">
<input type="email" class="newsletter_input" placeholder="Your E-mail" required="required">
<button class="button newsletter_button"><span>subscribe</span></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="background_image" style="background-image:url(images/footer.jpg)"></div>
<div class="footer_content">
<div class="container">
<div class="row">
<div class="col text-center">
<!-- Logo -->
<div class="logo">
<a href="#" class="d-flex flex-row align-items-end justify-content-start">
<span class="logo_bars d-flex flex-row align-items-end justify-content-between"><span></span><span></span><span></span><span></span><span></span></span>
<span class="logo_text">Play Kenyan Music</span>
</a>
</div>
<!-- Footer Social -->
<div class="footer_social">
<ul class="d-flex flex-row align-items-center justify-content-center">
<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer_bar">
<div class="container">
<div class="row">
<div class="col">
<div class="copyright text-center"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --> All rights reserved | DJ BOZIAH </div>
</div>
</div>
</div>
</div>
</footer>
@charset "utf-8";
/* CSS Document */
/******************************
[Table of Contents]
1. Fonts
2. Body and some general stuff
3. Header
4. Menu
5. Homestrong text
6. Song
7. Tours
8. App
9. Featured
10. News
11. Newsletter
12. Footer
******************************/
/***********
1. Fonts
***********/
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700');
/*********************************
2. Body and some general stuff
*********************************/
*
{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
font-weight: 400;
background: #FFFFFF;
color: #a5a5a5;
}
div
{
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul
{
list-style: none;
margin-bottom: 0px;
}
p
{
font-family: 'Josefin Sans', sans-serif;
font-size: 16px;
line-height: 1.875;
font-weight: 400;
color: #6d6d6d;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
display: inline;
position: relative;
color: inherit;
border-bottom: solid 1px #ffa07f;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
p:last-of-type
{
margin-bottom: 0;
}
a
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
position: relative;
color: #FF6347;
}
p a:hover
{
color: #FFFFFF;
background: #ffa07f;
}
p a:hover::after
{
opacity: 0.2;
}
::selection
{
background: rgba(42,194,117,0.9);
color: #ffffff;
}
p::selection
{
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
font-family: 'Josefin Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
line-height: 1.2;
color: #2a2a2a;
font-weight: 700;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection
{
}
img
{
max-width: 100%;
}
button:active
{
outline: none;
}
.form-control
{
color: #db5246;
}
section
{
display: block;
position: relative;
box-sizing: border-box;
}
.clear
{
clear: both;
}
.clearfix::before, .clearfix::after
{
content: "";
display: table;
}
.clearfix::after
{
clear: both;
}
.clearfix
{
zoom: 1;
}
.float_left
{
float: left;
}
.float_right
{
float: right;
}
.trans_200
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.trans_300
{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.trans_400
{
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.trans_500
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.fill_height
{
height: 100%;
}
.super_container
{
width: 100%;
overflow: hidden;
}
.prlx_parent
{
overflow: hidden;
}
.prlx
{
height: 130% !important;
}
.parallax-window
{
min-height: 400px;
background: transparent;
}
.parallax_background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.background_image
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.nopadding
{
padding: 0px !important;
}
.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item
{
height: 100%;
}
.slide
{
height: 100%;
}
.button
{
position: relative;
overflow: hidden;
width: 200px;
height: 56px;
border-radius: 22px;
border: none;
outline: none;
cursor: pointer;
text-align: center;
}
.button::after
{
display: block;
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background-color: #2ac275;
background-image: linear-gradient(to right, #2ac275, #cbdc0b, #2ac275);
background: #2ac275;
background: linear-gradient(to right, #2ac275, #cbdc0b, #2ac275);
content: '';
z-index: 0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.button:hover::after
{
left: 0;
}
.button a
{
position: relative;
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
z-index: 1;
line-height: 56px;
}
.button span
{
position: relative;
font-size: 14px;
font-weight: 700;
color: #ffffff;
line-height: 56px;
text-transform: uppercase;
z-index: 1;
}
.section_title h1
{
font-size: 30px;
}
/*********************************
3. Header
*********************************/
.header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #3b125d;
background-image: linear-gradient(to right, #2457d7, #3b125d);
background: #3b125d;
background: linear-gradient(to right, #2457d7, #3b125d);
z-index: 100;
}
/*Header gradient bottom border*/
.header::after
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
content: '';
background-color: #2ac275;
background-image: linear-gradient(to right, #eeff2d, #2ac275);
background: #2ac275;
background: linear-gradient(to right, #eeff2d, #2ac275);
}
.header_content
{
width: calc(100% + 30px);
left: -20px;
height: 134px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.header.scrolled .header_content
{
height: 75px;
}
.logo
{
position: absolute;
left: -10;
top: 18%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.logo_bars
{
width: 51px;
height: 40px;
}
.logo_bars > span
{
width: 6px;
}
.logo_bars > span:first-of-type,
.logo_bars > span:last-of-type
{
height: 17px;
background: #eeff2d;
}
.logo_bars > span:nth-child(2),
.logo_bars > span:nth-child(4)
{
height: 23px;
background: #2ac275;
}
.logo_bars > span:nth-child(3)
{
height: 30px;
background: #e830fe;
}
.logo_text
{
line-height: 0.75;
font-size: 30px;
font-weight: 600;
color: #ffffff;
margin-left: 3px;
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
-ms-transform: translateY(4px);
-o-transform: translateY(4px);
transform: translateY(4px);
}
.main_nav
{
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-ms-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
}
.main_nav ul li
{
position: relative;
}
.main_nav ul li:not(:last-of-type)
{
margin-right: 65px;
}
.main_nav ul li a
{
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.main_nav ul li a:hover,
.main_nav ul li.active a
{
color: #2ac275;
}
.main_nav ul li.active::after
{
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -20px;
width: 14px;
height: 14px;
background: #2ac275;
border-radius: 50%;
content: '';
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.header.scrolled .main_nav ul li.active::after
{
bottom: -10px;
width: 10px;
height: 10px;
}
.log_reg
{
position: absolute;
top: 44%;
right: 0;
flex: 0 0 auto;
}
.header.scrolled .log_reg
{
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.log_reg ul
{
display: block;
}
.log_reg ul li
{
position: relative;
}
.log_reg ul li:not(:last-of-type)
{
padding-right: 18px;
margin-right: 1px;
}
.log_reg ul li:not(:last-of-type)::after
{
position: absolute;
top: 0;
right: 0;
content: '/';
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-left: 5px;
margin-right: 5px;
}
.log_reg ul li a
{
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
.log_reg ul li a:hover
{
color: #2e9e7a;
}
.hamburger
{
display: none !important;
margin-left: 25px;
width: 34px;
height: 16px;
padding: 2px;
cursor: pointer;
flex: 0 0 auto;
}
.hamburger > div
{
background: #ffffff;
height: 2px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.hamburger > div:first-child
{
width: 100%;
}
.hamburger > div:nth-child(2)
{
width: 50%;
}
.hamburger > div:nth-child(3)
{
width: 75%;
}
.hamburger:hover > div
{
width: 100%;
}
/*.hamburger:hover > div:first-child
{
background: #e830fe;
}
.hamburger:hover > div:nth-child(2)
{
background: #2ac275;
}
.hamburger:hover > div:nth-child(3)
{
background: #eeff2d;
}*/
/*********************************
4. Menu
*********************************/
.menu
{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 101;
visibility: hidden;
opacity: 0;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.menu.active
{
visibility: visible;
opacity: 1;
}
.menu_container
{
width: 100%;
height: 100%;
}
.menu_background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3b125d;
background-image: linear-gradient(to right, #2457d7, #3b125d);
background: #3b125d;
background: linear-gradient(to right, #2457d7, #3b125d);
opacity: 0.95;
}
.menu_close
{
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
}
.menu_close i
{
font-size: 22px;
color: #ffffff;
}
.menu_content
{
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 100%;
}
.menu_nav ul li
{
position: relative;
display: inline-block;
}
.menu_nav ul li::after
{
display: block;
position: absolute;
top: 53%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
width: 0;
height: 3px;
background: #ffffff;
content: '';
z-index: 1;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}
.menu_nav ul li:hover::after
{
width: 100%;
}
.menu_nav ul li a
{
font-size: 36px;
font-weight: 400;
color: #ffffff;
}
/*********************************
5. Home
*********************************/
.home
{
height: 370px;
border-bottom: solid 2px #ffffff;
}
.home_slider_container
{
width: 100%;
height: 100%;
}
.home_container
{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0px;
width: 100%;
}
.home_title
{
display: inline-block;
position: relative;
padding-top: 81px;
}
.home_title.islive::after
{
display: block;
position: absolute;
top: 0;
left: -77px;
width: 90px;
height: 90px;
border-radius: 50%;
background: #e830fe;
content: 'Trending';
line-height: 95px;
font-size: 15px;
font-weight: 900;
color: #ffffff;
text-transform: uppercase;
}
.home_title h1
{
margin:0;
padding:0;
font-size: 30px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
}
.home_title h1 span
{
margin:0;
padding:0;
color: #eeff2d;
font-size: 30px;
}
.tickets_form_container
{
margin-top: 40px;
padding-left: 150px;
padding-right: 150px;
}
.tickets_form
{
display: block;
}
.tickets_form_inputs
{
width: calc(100% - 213px);
}
.tickets_form_input
{
position: relative;
width: calc((100% - 16px) / 2);
height: 56px;
border-radius: 22px;
border: solid 2px #ffffff;
background: rgba(255,255,255,0.14);
cursor: pointer;
color: #ffffff;
padding-left: 37px;
outline: none;
}
.tickets_form_input::-webkit-input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
}
.tickets_form_input:-moz-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
}
.tickets_form_input::-moz-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
}
.tickets_form_input:-ms-input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
}
.tickets_form_input::input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #FFFFFF !important;
}
.custom_dropdown_selected
{
width: 100%;
height: 100%;
line-height: 56px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.custom_dropdown ul
{
position: absolute;
left: 0;
top: calc(100% + 20px);
padding-left: 37px;
background: #ffffff;
width: 100%;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 17px;
border-radius: 22px;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.custom_dropdown.active ul
{
visibility: visible;
opacity: 1;
top: 100%;
}
.custom_dropdown ul li:not(:last-of-type)
{
margin-bottom: 7px;
}
.custom_dropdown ul li
{
font-size: 16px;
font-weight: 600;
color: #000000;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.custom_dropdown ul li:hover
{
color: #2e9e7a;
}
.tickets_form_button
{
width: 200px;
height: 56px;
border-radius: 22px;
border: none;
outline: none;
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
cursor: pointer;
}
.tickets_form_button span
{
position: relative;
z-index: 1;
}
.home_slider_nav
{
position: absolute;
top: calc(50% + 67px);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 101px;
width: 54px;
height: 54px;
border-radius: 50%;
background: #2ac275;
z-index: 1;
cursor: pointer;
text-align: center;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.home_slider_nav i
{
font-size: 20px;
line-height: 54px;
color: #ffffff;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.home_slider_nav:hover
{
background: #eeff2d;
}
.home_slider_nav:hover i
{
color: #2ac275;
}
.home_social
{
position: absolute;
left: 54px;
bottom: 27px;
z-index: 1;
}
.home_social_text
{
font-size: 18px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
padding-right: 180px;
line-height: 0.75;
margin-right: 11px;
}
.home_social_text::after
{
display: block;
position: absolute;
top: 5px;
right: 0;
width: 172px;
height: 1px;
background: rgba(255,255,255,0.63);
content: '';
}
.home_social_list ul li
{
width: 32px;
height: 32px;
border-radius: 50%;
background: #2ac275;
text-align: center;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.home_social_list ul li:not(:last-of-type)
{
margin-right: 12px;
}
.home_social_list ul li:hover
{
background: #eeff2d;
}
.home_social_list ul li a
{
display: block;
height: 100%;
}
.home_social_list ul li a i
{
font-size: 16px;
color: #ffffff;
line-height: 32px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.home_social_list ul li:hover a i
{
color: #2ac275;
}
.scroll_down
{
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 23px;
z-index: 1;
cursor: pointer;
}
.scroll_down a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.scroll_down > div > div:first-child
{
font-size: 12px;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
line-height: 0.75;
margin-right: 7px;
}
.scroll_down > div > div:last-child
{
margin-bottom: 5px;
}
.scroll_arrows > img
{
-webkit-animation: arrowAnimation 2s infinite;
animation: arrowAnimation 2s infinite;
opacity: 0;
}
.scroll_arrows > img:last-of-type
{
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
@-webkit-keyframes arrowAnimation
{
0%
{
opacity: 0;
}
50%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
@keyframes arrowAnimation
{
0%
{
opacity: 0;
}
50%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
/*********************************
6. Song
*********************************/
.song
{
}
.song_content
{
padding-top: 84px;
padding-bottom: 80px;
}
.single_player_container
{
}
.single_player
{
width: 100%;
}
.jp-audio
{
width: 100%;
}
.time_controls
{
width: calc(100% - 193px);
flex: 0 0 auto;
}
.player_controls_box
{
width: 390px;
padding-right: 41px;
flex: 0 0 auto;
}
.song_image
{
width: 119px;
height: 119px;
border: solid 2px #ffffff;
}
.player_bars
{
width: calc(100% - 390px);
}
.player_progress_box
{
width: calc(100% - 193px);
padding-top: 70px;
}
.player_title
{
display: inline-block;
height: 30px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
padding-left: 21px;
padding-right: 23px;
border-radius: 15px;
background: #2ac275;
line-height: 30px;
}
.player_controls
{
margin-top: 21px;
}
.player_controls > button:not(:last-of-type)
{
margin-right: 7px;
}
.play_button
{
width: 100%;
}
.player_button
{
position: relative;
width: 45px;
height: 45px;
background: transparent;
border: solid 3px #ffffff;
border-radius: 50%;
outline: none !important;
cursor: pointer;
flex: 0 0 auto;
}
.player_button::after
{
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.jp-play::after
{
left: calc(50% + 3px);
width: 20px;
height: 23px;
content: url(../images/play.png);
}
.jp-state-playing .jp-play
{
background: #ff1a4b;
border-color: #ff1a4b;
}
.jp-state-playing .jp-play::after
{
content: url(../images/pause.png);
left: 50%;
}
.jp-stop::after
{
top: calc(50% - 2px);
width: 14px;
height: 13px;
content: url(../images/stop.png);
}
.song_info
{
position: absolute;
top: 0;
left: 0;
}
.jp-artist
{
font-size: 16px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
margin-top: -1px;
}
.jp-title
{
font-size: 14px;
font-weight: 400;
color: rgba(255,255,255,0.7);
margin-top: 2px;
}
.jp-progress
{
width: 100%;
cursor: pointer;
}
.jp-seek-bar
{
height: 100%;
padding-top: 5px;
padding-bottom: 5px;
background: transparent;
margin-bottom: -5px;
}
.jp-seek-bar > div
{
height: 2px;
background: #ffffff;
}
.jp-play-bar
{
height: 100%;
background: #2ac275;
overflow: visible !important;
}
.jp-play-bar > span
{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: -6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #2ac275;
}
.jp-current-time
{
position: absolute;
bottom: -35px;
left: 0;
font-size: 16px;
font-weight: 400;
color: #ffffff;
}
.jp-duration
{
position: absolute;
bottom: -35px;
right: 0;
font-size: 16px;
font-weight: 400;
color: #ffffff;
}
.jp-volume-controls
{
width: 193px;
padding-left: 42px;
flex: 0 0 auto;
padding-top: 70px;
}
.jp-volume-controls > div:first-child
{
}
.mute_button
{
position: absolute;
left: 42px;
bottom: 19px;
}
.jp-mute
{
position: relative;
background: transparent;
border: none;
outline: none !important;
cursor: pointer;
}
.jp-mute::after
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: url(../images/mute_off.png);
}
.jp-state-muted .jp-mute::after
{
content: url(../images/mute_on.png);
}
.jp-volume-bar
{
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background: transparent;
overflow: hidden;
cursor: pointer;
}
.jp-volume-bar > div
{
width: 100%;
height: 100%;
height: 2px;
background: #ffffff;
}
.jp-volume-bar-value
{
height: 100%;
background: #2ac275;
}
/*********************************
7. Tours
*********************************/
.tours
{
background: #ffffff;
padding-top: 112px;
padding-bottom: 120px;
}
.tours_list_container
{
margin-top: 14px;
}
.tours_list li
{
padding-top: 30px;
padding-bottom: 29px;
}
.tours_list li:not(:last-of-type)
{
border-bottom: solid 2px #d5d5d5;
}
.tour_date
{
font-size: 30px;
font-weight: 400;
color: #2a2a2a;
line-height: 1.2;
}
.tour_location
{
font-size: 16px;
font-weight: 400;
color: #6d6d6d;
line-height: 1.2;
padding-left: 2px;
margin-top: 9px;
}
.tour_name
{
margin-top: 7px;
padding-left: 2px;
}
.tour_name a
{
font-size: 16px;
font-weight: 400;
color: #6d6d6d;
}
.tour_name a:hover
{
color: #2e9e7a;
}
.tour_button
{
margin-top: 17px;
}
.tours_link
{
margin-top: 14px;
padding-left: 5px;
}
.tours_link a
{
position: relative;
font-size: 18px;
font-weight: 400;
color: #2ac275;
}
.tours_link a::after
{
display: block;
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 1px;
background: #2ac275;
content: '';
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.tours_link a:hover
{
color: #cbdc0b;
}
.tours_link a:hover::after
{
background: #cbdc0b;
}
.extra
{
min-height: 700px;
height: calc(100% - 12px);
margin-top: 7px;
padding-left: 25px;
padding-right: 25px;
padding-top: 55px;
padding-bottom: 106px;
text-align: center;
}
.extra_frame
{
position: absolute;
top: 22px;
left: 26px;
width: calc(100% - 53px);
height: calc(100% - 46px);
border: solid 2px #eeff2d;
opacity: 0.59;
}
.extra_text
{
font-size: 12px;
font-weight: 700;
color: #ffffff;
line-height: 0.75;
text-transform: uppercase;
}
.extra_year
{
font-size: 92px;
font-weight: 600;
color: #2ac275;
line-height: 0.75;
}
.extra_title
{
font-size: 72px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
line-height: 1;
margin-top: 4px;
}
.extra_subtitle
{
font-size: 18px;
font-weight: 700;
color: #ffffff;
line-height: 0.75;
text-transform: uppercase;
margin-top: 8px;
}
/*********************************
8. App
*********************************/
.app
{
padding-top: 123px;
background: #eef2f6;
padding-bottom: 117px;
}
.app_image
{
width: calc(100% + 33px);
-webkit-transform: translateX(-67px);
-moz-transform: translateX(-67px);
-ms-transform: translateX(-67px);
-o-transform: translateX(-67px);
transform: translateX(-67px);
}
.app_content
{
height: 100%;
-webkit-transform: translateX(35px);
-moz-transform: translateX(35px);
-ms-transform: translateX(35px);
-o-transform: translateX(35px);
transform: translateX(35px);
}
.app_text
{
padding-left: 4px;
}
.stores
{
margin-top: 68px;
padding-left: 4px;
}
.stores > div:not(:last-of-type)
{
margin-right: 19px;
}
/*********************************
9. Featured
*********************************/
.featured
{
background: #ffffff;
padding-top: 122px;
padding-bottom: 89px;
}
.featured_row
{
margin-top: 75px;
}
.featured_list
{
width: calc(100% + 30px);
left: -15px;
margin-top: 82px;
}
.featured_list ul li
{
position: relative;
width: calc(100% / 3);
min-height: 100px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
}
.featured_list ul li > div:first-of-type
{
position: absolute;
left: 15px;
bottom: 0;
width: calc(100% - 30px);
height: 78px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
background: rgba(0,0,0,0.66);
z-index: 1;
padding-left: 90px;
}
.featured_list .jp-artist
{
display: none;
}
.featured_list .jp-playlist > ul > li > div:first-of-type a
{
display: none;
-webkit-order: 2;
order: 2;
}
.featured_title
{
font-size: 14px;
font-weight: 400;
color: rgba(255,255,255,0.53);
outline: none;
}
.featured_list .jp-playlist > ul > li > div:first-of-type a:hover
{
color: #2e9e7a;
}
.featured_album
{
font-size: 18px;
font-weight: 400;
color: #ffffff;
line-height: 1.2;
}
.album_play_button
{
position: absolute;
left: 35px;
bottom: 16px;
width: 45px;
height: 45px;
border-radius: 50%;
background: #ff1a4b;
z-index: 1;
border: none;
outline: none !important;
cursor: pointer;
}
.album_play_button::after
{
display: block;
position: absolute;
top: 50%;
left: calc(50% + 3px);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 20px;
height: 23px;
content: url(../images/play.png);
}
.album_play_button.is-playing::after
{
left: 50%;
top: calc(50% - 1px);
width: 14px;
height: 13px;
content: url(../images/stop.png);
}
/*********************************
10. News
*********************************/
.news
{
padding-top: 116px;
padding-bottom: 124px;
background-color: #3b125d;
background-image: linear-gradient(to right, #2457d7, #3b125d);
background: #3b125d;
background: linear-gradient(to right, #2457d7, #3b125d);
}
.news .section_title
{
text-align: center;
}
.news .section_title h1
{
color: #ffffff;
}
.news_row
{
margin-top: 68px;
}
.news_post.image_top .news_post_content
{
padding-top: 41px;
padding-bottom: 47px;
padding-right: 15px;
}
.news_post.image_bottom .news_post_content
{
padding-top: 42px;
padding-bottom: 40px;
padding-right: 15px;
}
.news_post_date
{
width: 113px;
height: 30px;
border-radius: 15px;
background: #2ac275;
text-align: center;
}
.news_post_date a
{
display: block;
height: 100%;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 30px;
}
.news_post_title
{
margin-top: 18px;
}
.news_post_title a
{
font-size: 24px;
font-weight: 700;
color: #ffffff;
}
.news_post_title a:hover
{
color: #2ac275;
}
.news_post_text
{
margin-top: 9px;
}
.news_post_text p
{
color: #ffffff;
}
/*********************************
11. Newsletter
*********************************/
.newsletter
{
background: #ffffff;
padding-top: 77px;
padding-bottom: 67px;
}
.newsletter_text
{
margin-top: -12px;
padding-left: 2px;
}
.newsletter_form_container
{
padding-left: 40px;
height: 100%;
padding-bottom: 25px;
}
.newsletter_form
{
display: block;
position: relative;
width: 100%;
}
.newsletter_input
{
width: calc(100% - 215px);
height: 56px;
border-radius: 22px;
border: solid 2px #e0e7ee;
padding-left: 34px;
outline: none;
font-size: 16px;
font-weight: 600;
color: #000000;
}
.newsletter_button
{
width: 208px;
height: 56px;
border-radius: 22px;
cursor: pointer;
}
.newsletter_button span
{
position: relative;
font-size: 14px;
font-weight: 700;
color: #ffffff;
line-height: 56px;
text-transform: uppercase;
z-index: 1;
}
.newsletter_input::-webkit-input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #6d6d6d !important;
}
.newsletter_input:-moz-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #6d6d6d !important;
}
.newsletter_input::-moz-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #6d6d6d !important;
}
.newsletter_input:-ms-input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #6d6d6d !important;
}
.newsletter_input::input-placeholder
{
font-size: 16px !important;
font-weight: 600 !important;
color: #6d6d6d !important;
}
/*********************************
12. Footer
*********************************/
.footer
{
display: block;
position: relative;
}
.footer_content
{
padding-top: 76px;
padding-bottom: 74px;
}
.footer .logo
{
display: inline-block;
position: relative;
left: auto;
top: auto;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.footer_social
{
margin-top: 58px;
}
.footer_social ul li:not(:last-of-type)
{
margin-right: 18px;
}
.footer_social ul li
{
width: 46px;
height: 46px;
border-radius: 50%;
background: #2ac275;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_social ul li:hover
{
background: #eeff2d;
}
.footer_social ul li a
{
display: block;
height: 100%;
}
.footer_social ul li a i
{
font-size: 20px;
color: #ffffff;
line-height: 46px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.footer_social ul li:hover a i
{
color: #2ac275;
}
.copyright
{
height: 49px;
line-height: 49px;
}
Hope the code was sent correctly
Hope the code was sent correctly
No, you happened to post the css without the code format, but I fixed that for you.
The html was code formatted but it was not the complete page, making debug awkward.
This way to post code to debug doesn’t work, at least not for me, it is too time consuming to find out what you need to do or change in your code. Sorry!
I urge you to instead provide a link to the site you are working on.
Or copy the site/page to a temporary location so it can serve as a working copy we can check out to give you adequate help.
If that’s not possible, please make a complete mini web page that works as a stand alone page that show the issue. Zip it and upload the file in your next post.
Please read the Forum Posting Basics below and follow the best you can:
You clearly have a vision of how you want it to look like.
You would greatly help us understand the issue if you post one image of what it looks like now and another image of how you want it to look like.
I suggest you take a screenshot and edit it to show what you have and what you want.
Then perhaps the code you already posted could be read accordingly.
Looking forward to see the pictures in your next post.
Try changing the html for this line:
<div class="header_content d-flex flex-row align-items-center justify-content-center">
And change it to this:
<div class="header_content d-flex flex-row align-items-center justify-content-left">
Thank you much Paul and Everyone for all your help. Yes that worked on the home header, however i want it on the slider Text.I tried to add the code to the slider text container all it did was it got rid of the background image instead.
I was able to have it move left a llittle bit but not all the way as i want it by adding left: -77px; to main_style.css .home_title is live :: and removed right. i having troubles uploaded zipped file of all the local files i am using.
Paul i am going to zip the file and upload in a few minutes.
In the slide you have added classes of text-align-center to the html of the home_title_container. Either remove those classes from the html or over-ride form the css like this.
.home_title_container{text-align:left!important}
The !important is needed because the text-align-center is a default utility class already qualified with!important
Yes Yes Yes that worked. Thank You @PaulOB Thank you @Erik_J …this is the best community forum . thank thank you
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.