OoctobunnySep 20, 2016
Hi,
when taking the "op-personal" template as a basis: is there an easy way to align all the text content in the slider to the right margin instead of the left one?
Best regards,
o
Flush right slider text
4 replies · opened Sep 20, 2016
SSemicolon WebSTAFFSep 20, 2016
Hello,
This is Definitely Possible. Please consider using the following code replacing the Existing Code (from .vertical-middle Container):
Darcy Shearer
Graphics Designer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id hic neque alias! Accusamus, perspiciatis. Dicta accusantium, consequuntur maxime vour sequi cumque, labore consequuntur veritatis animi sint non voluptatibus.
[
](#)
[
](#)
[
](#)
[
](#)
This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
OoctobunnySep 21, 2016
Hi,
thank you, worked like a charm!
Maybe you could also give me a tip for sorting out the following issue:
I want to include a very primitive, responsive, list-based vertical timeline. For that purpose, I've included the following in op-personal.html:
Curriculum Vitae
Education timeline
-
2009 - 2015
Event A
Short description
-
2008 - 2009
Event B
Short description
-
2007 - 2008
Event C
Short description
The CSS (placed in custom.css) looks as follows:
.timeline {
list-style: none;
}
.timeline > li {
margin-bottom: 60px;
}
/* for Desktop */
@media ( min-width : 640px ){
.timeline > li {
overflow: hidden;
margin: 0;
position: relative;
}
.timeline-date {
width: 110px;
float: left;
margin-top: 20px;
}
.timeline-content {
width: 75%;
float: left;
border-left: 6px #f6f6f6 solid;
padding-left: 30px;
}
.timeline-content:before {
content: '';
width: 12px;
height: 12px;
background: #3CB5F9;
position: absolute;
left: 107px;
top: 24px;
border-radius: 100%;
}
}(The pixel values might require some change to be consistent with the values you apply for making the template responsive.)
When using this code outside the template, timeline-date and timeline-content are perfectly aligned. Within the template, however, the timeline-content is slightly shifted upwards. What could cause that conflict? Should I somehow reset certain styles first?
Sorry for that basic question, but I'm a bloody beginner.
Best regards,
o
OoctobunnySep 24, 2016
Hello,
maybe you could give me a tip for sorting out the following issue:
I want to include a very primitive, responsive, list-based vertical timeline. For that purpose, I’ve included the following in op-personal.html:
Curriculum Vitae
Education timeline
-
2009 - 2015
Event A
Short description
-
2008 - 2009
Event B
Short description
-
2007 - 2008
Event C
Short description
The CSS (placed in custom.css) looks as follows:
.timeline {
list-style: none;
}
.timeline > li {
margin-bottom: 60px;
}
/* for Desktop */
@media ( min-width : 640px ){
.timeline > li {
overflow: hidden;
margin: 0;
position: relative;
}
.timeline-date {
width: 110px;
float: left;
margin-top: 20px;
}
.timeline-content {
width: 75%;
float: left;
border-left: 6px #f6f6f6 solid;
padding-left: 30px;
}
.timeline-content:before {
content: '';
width: 12px;
height: 12px;
background: #3CB5F9;
position: absolute;
left: 107px;
top: 24px;
border-radius: 100%;
}
}(The pixel values might require some change to be consistent with the values you apply for making the template responsive.)
When using this code outside the template, timeline-date and timeline-content are perfectly aligned. Within the template, however, timeline-content is slightly shifted upwards. What could cause that conflict? Should I somehow reset certain styles first?
Sorry for that basic question, but I’m a bloody beginner.
Best regards,
o
SSemicolon WebSTAFFSep 26, 2016
Hello,
We have just checked out your Codes and apparently there are no issues. The Only thing is that there is a margin-top CSS Property added to the .timeline-date Element which makes the .timeline-content to appear slightly upwards. It is recommended that you make this adjustments accordingly as we use the Latest Reset CSS Standards so there is nothing to worry about and will not affect your Website adversely. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard