Closed vegetarianinvestor closed 3 years ago
Use (S)CSS.
I did add scss in the custom.scss file and it did get applied to the portfolio title but not to its content. Since this seems specific to this theme I am reopening this issue and request for a review.
Below is the overridden section of the index.html page and the scss styling. Note the new css class 'portfolio-section-home
'. The styling gets applied to the title but not to its content. Please guide on what could be done.
Thanks.
<!-- portfolio -->
{{ with .Params.portfolio }}
{{ if .enable }}
<section class="feature bg-2" style="background-image: url('{{ .bg_image | relURL}}')">
<div class="container">
<div class="row">
<div class="portfolio-section-home col-md-6 col-md-offset-6">
{{ with .title }}<h2 class="section-subtitle">{{ . | markdownify }}</h2>{{ end }}
{{ with .content }} {{ . | markdownify }} {{ end }}
{{ with .button }}
{{ if .enable }}
<a href="{{ .link | relLangURL }}" class="btn btn-view-works">{{ .label }}</a>
{{ end }}
{{ end }}
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- /portfolio -->
custom.scss
.portfolio-section-home {
color: white ;
}
There's probably a more specific rule present somewhere... you can use your browser's development tools to inspect all the rules affecting the element in question. E.g. Firefox's page inspector (Chrome offers almost the same functionality).
If the cascading rules of CSS in general are unclear to you, I'd recommend to read this.
Thanks for the guidance. It helped me to troubleshoot the issue.
The text color for the portfolio section on home page makes the text unreadable on mobile due to its overlap with the background image color especially due to the change in the title & description needed for my website.
I tried multiple ways to change the text color from the "index.html" page but without any luck. I tried to look up the hugo documentation but could not figure out a way.
Could you please guide on this?
Thanks.