htmlcsstwitter-bootstrap-3footerlinear-gradients
How Do I Modify My Linear Gradient Width to 100%?
I have a linear gradient with red at the top going to white at the bottom in my footer CSS. I want the gradient to be the width of the display without black margins to the left and right. I have similar code in my header markup for a solid red line that does not have black margins.
CSS
body { font-family: Arial; background-color: $black; width: 100%; font-size: 18px; margin:0 auto; }
footer, header { font-family: Eurostile; padding-top: 15px; margin:0 auto; .row { .row-col-img-padding { [class*="col-"] { padding-left: 0px !important; padding-right: 0px !important; } } } }
footer {
color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; }
background: red;
background: linear-gradient($red, $white);
background: -khtml-linear-gradient($red, $white);
background: -moz-linear-gradient($red, $white);
background: -ms-linear-gradient($red, $white);
background: -o-linear-gradient($red, $white);
background: -webkit-linear-gradient($red, $white);
}
header { background-color: $black; p { color: $grayLight; font-weight: bold; font-size: 100%; line-height: 100%; } }
CSS for solid line in header where the red line fills up the screen with no margins.
#back-red { background-color: $red; padding-bottom: 15px; }
Markup
<footer class="footer">
<div class="row row-col-img-padding">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
<ul class="list-inline">
<li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
</ul>
</div>
</div>
<div class="row row-col-img-padding">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
<%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
<div class="footer-links">
<%= link_to "#{t :footer_link1}", locale_root_path %>
<%= link_to "#{t :footer_link3}", system_path %>
<%= link_to "#{t :footer_link4}", manage_path %>
<%= link_to "#{t :footer_link6}", clients_path %>
<%= link_to "#{t :footer_link2}", about_path %>
<%= link_to "#{t :footer_link5}", contact_path %>
<%= link_to "#{t :footer_link7}", media_path %><br>
<%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
<%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
<%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
<%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
<%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
<%= link_to "#{t :footer_link9}", privacy_path %>
<%= link_to_unless_current "#{t :english}", locale: "en" %>
<%= link_to_unless_current "Français", locale: "fr" %>
</div>
<p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
</div>
</div>
</footer>
Markup for header
<header class="header">
<div class="row row-col-img-padding" id="pad-bottom-15">
<p class="locale-line" align="center"><span class="english-link"><%= link_to_unless_current "#{t :english}", locale: "en" %></span><%= link_to_unless_current "#{t :french}", locale: "fr" %></p>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center" id="header-images">
<div class="page-class" align="center">
<ul>
<li><%= link_to image_tag("menu-home.jpg", class: "img-responsive aspect", alt: "#{t :footer_link1}"), locale_root_path %></li>
<li><%= link_to image_tag("menu-manage-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link4}"), manage_path %></li>
<li><%= link_to image_tag("menu-system-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link3}"), system_path %></li>
<li><%= link_to image_tag("menu-media-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link7}"), media_path %></li>
<li><%= link_to image_tag("menu-clients-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link6}"), clients_path %></li>
<li><%= link_to image_tag("menu-about-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link2}"), about_path %></li>
<li><%= link_to image_tag("menu-contact-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link5}"), contact_path %></li>
</ul>
</div>
</div>
</div>
<div class="row row-col-img-padding" id="back-red">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
<h1><%= @page_title %></h1>
<% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
<% else %>
<p><%= @page_abstract1 %></p>
<p><%= @page_abstract2 %></p>
<p><%= @page_abstract3 %></p>
<p><%= @page_abstract4 %></p>
<p><%= @page_abstract5 %></p>
<% end %>
<p><%= @page_abstract6 %></p>
<% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
<% else %>
<p><%= @page_abstract7 %></p>
<% end %>
</div>
</div>
</header>
Ruby on Rails application.html.erb
<body>
<div class="container-fluid">
<%= render 'layouts/header' %> <!-- update app/views/layouts/_systemmessage.html.erb when you need to reboot the server -->
<%= render 'layouts/systemmessage' %>
<% flash.each do |key, value| %>
<%= content_tag(:div, value, class: "alert alert-#{key}") %>
<% end %>
<%= yield %>
<%= render 'layouts/contact_footer' %>
<%= render 'layouts/footer' %>
</div>
<%= javascript_include_tag "application" %>
<%= debug(params) if Rails.env.development? %>
</body>
The images below shows how my CSS works at widths 500px and 320px. The links and the images are using CSS .footer-links. They spread to the edge of the screen but the gradient does not.
CSS below
.footer-links { width: 1024px; padding-top: 10px; a { padding-left: 5px; padding-right: 5px; } }
@media screen and (max-width: 1024px) { body, footer, header, .box-message, .footer-links, .page-class, .red-line-1px { max-width: 100%; } }
Since the header and footer are within body I assume my problem is with the gradient width. I have seen many posts related to linear gradients and widths but I could not find anything that explained exactly how I need to change my CSS to get this working.
Solution
Bootstraps .container-fluid rule looks like this
{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
So for your footer to work, you could do like this, where the major change is to add a wrapper <div class="row"> and then remove the row class from
<div class="row-col-img-padding">, and then set the gradient on the wrapper
Markup for footer
<footer class="footer">
<div class="row">
<div class="row-col-img-padding">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
<ul class="list-inline">
<li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
<li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
</ul>
</div>
</div>
<div class="row-col-img-padding">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
<%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
<div class="footer-links">
<%= link_to "#{t :footer_link1}", locale_root_path %>
<%= link_to "#{t :footer_link3}", system_path %>
<%= link_to "#{t :footer_link4}", manage_path %>
<%= link_to "#{t :footer_link6}", clients_path %>
<%= link_to "#{t :footer_link2}", about_path %>
<%= link_to "#{t :footer_link5}", contact_path %>
<%= link_to "#{t :footer_link7}", media_path %><br>
<%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
<%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
<%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
<%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
<%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
<%= link_to "#{t :footer_link9}", privacy_path %>
<%= link_to_unless_current "#{t :english}", locale: "en" %>
<%= link_to_unless_current "Français", locale: "fr" %>
</div>
<p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
</div>
</div>
</div>
</footer>
Change your CSS footer rule to this
footer {
padding-top: 0
}
Move content of existing footer rule to a new rule, footer > .row, like this
footer > .row {
padding-top: 15px; /* added new property */
color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; }
background: red;
background: linear-gradient($red, $white);
background: -khtml-linear-gradient($red, $white);
background: -moz-linear-gradient($red, $white);
background: -ms-linear-gradient($red, $white);
background: -o-linear-gradient($red, $white);
background: -webkit-linear-gradient($red, $white);
}
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome