themefisher / airspace-hugo

Airspace Hugo theme for multipurpose use, like Portfolio, Blog, Business.
https://gethugothemes.com/products/airspace/?utm_source=airspace_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
351 stars 508 forks source link

Formating Text In Portfolio Section On Home Page #176

Closed vegetarianinvestor closed 3 years ago

vegetarianinvestor commented 3 years ago

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.

salim-b commented 3 years ago

Use (S)CSS.

vegetarianinvestor commented 3 years ago

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 ;
}
salim-b commented 3 years ago

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.

vegetarianinvestor commented 3 years ago

Thanks for the guidance. It helped me to troubleshoot the issue.