The issue I encountered with my Index was related to the positioning of the contents within the body tag. I was able to resolve it by adding the following code to my site.css:
margin-top: 340px;
Now, my index is displaying correctly! However, after applying the margin-top: 340px; in my site.css, I noticed that other views were affected as shown below:
https://i.sstatic.net/tRorJ.png the body tag now has a 340px offset from the top.
So, how can I target only my index page in yii2 for this adjustment?
Thank you
Code:
html,
.my-navbar {
background-color: #ffffff;
height: 10px;
}
.tagline {
text-shadow: 0 0 10px #000;
color: #fff;
margin-top: 100px;
}
body {
height: 100%;
margin-top: 340px;
font-family: monospace;
}
.footer {
height: 180px;
background-color: #222222;
border-top: 1px solid #eeeeee;
padding-top: 20px;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px;
}
.business-header {
height: 400px;
background: url('../images/header.jpg');
position: absolute;
top: 0;
left: 0;
right: 0;
background-size: cover;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings', fantasy;
font-style: normal;
font-weight: normal;
line-height: 1;
padding-left: 5px;
}
a.asc:after {
content: /*"\e113"*/ "\e151";
}
a.desc:after {
content: /*"\e114"*/ "\e152";
}
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
}
.grid-view th {
white-space: nowrap;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
.workspotname {
color: white;
}