Been playing around with the CSS but just don’t seem to get the correct one to display this correctly. The challenge I am sitting with is still to display it on the right side of the image but once it comes to the bottom where the full width is available then it still keeps the text on the right and not align the text the full width of the page. Here is extract of the CSS and image below of what I am trying to achieve:
element.style {
max-width: 1252px;
height: 3864px;
top: 1017.859375px;
left: 20px;
overflow: hidden;
}
(index)media="all"
.a3-portfolio-expander-popup {
background: none repeat scroll 0 0 #E0E0E0;
color: #60646c;
}
(index)media="all"
.a3-portfolio-expander-popup {
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
background: none repeat scroll 0 0 #2A2A2A;
border: 0px solid #FFFFFF;
-webkit-border-radius: 0px;
border-radius: 0px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
color: #E0E0E0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0px;
margin-bottom: 20px !important;
margin-left: auto;
margin-right: auto;
left: inherit !important;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 100000 !important;
}
This is what the text displays as, I want to display the full width of the page as soon as it goes past the bottom of the image: https://postimg.org/image/7bl6654kv/
