I'd like to put an SVG hyperlink to the left of these two page links:
The site uses Jekyll and is built off Poole. The site is nearly identical right now so any additional CSS details can be seen in Poole's repo
I'm struggling with how to place an image or svg in the masthead class below. I'd like the logo to be inline with page navigation. The img tag below currently displays nothing.
.masthead {
padding-top: 1rem;
padding-bottom: 1rem;
margin-bottom: 3rem;
}
.masthead-title {
margin-top: 0;
margin-bottom: 0;
color: $gray-4;
}
.masthead-title a {
color: inherit;
}
.masthead-title small {
font-size: 75%;
font-weight: 400;
opacity: .5;
}
<header class="masthead">
<h3 class="masthead-title">
{{ <img src="/assets/logo_small.svg" height="25" width="100"/> }} <!--site.title-->
{% for page in site.pages_list %}
<small>{{ page[0] }}</small>
{% endfor %}
</h3>
</header>
In the code you provided, it looks like the trouble is you put the image in a Liquid variable. It should be <img ...>, not {{ <img ... > }}
Here's a minimal snippet that removes everything not related to your question, showing the <img> inline with your links.
.masthead img {
width: 100px;
height: 25px;
}
<header class="masthead">
<h3>
<a href="">
<img src="/assets/logo_small.svg" />
</a>
<small>
link 1
</small>
<small>
link 2
</small>
</h3>
</header>
Related
I am trying to work on the responsiveness of my django application on mobile view. So here is our it looks on a smaller screen size
So I want to remove all the white space that I have marked in blue, which is supposed to separate one post from the next. Here is the code snippet associated with that section
<section class="category-section">
<div class="container" data-aos="fade-up">
<div class="section-header d-flex justify-content-between align-items-center mb-5">
<h2>Politics</h2>
<div>See All Politics</div>
</div>
<div class="row">
{% for politic in politics%}
{% if forloop.counter < 11 %}
<div class="post-entry-1 col-lg-2 col-md-6 col-xs-12 mx-1">
<img src="{{politic.image.url}}" alt="" class="post_img img-fluid">
<div class="post-meta float-right">
<span class="date">{{politic.category}}</span>
<span class="mx-1">•</span>
<span>{{politic.created_at}}</span>
</div>
<h2 class="mb-2">{{politic.title}}</h2>
<span class="author mb-3 d-block">Ole Pundit</span>
<p class="mb-4 d-block">{{politic.body| safe | truncatewords:15}}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
And here are some of the css style classes that are at play
.post-entry-1 {
margin-bottom: 30px;
}
.post-entry-1 img {
margin-bottom: 30px;
}
.post-entry-1 h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
line-height: 1.2;
font-weight: 500;
}
.post-entry-1 h2 a {
color: var(--color-black);
}
.post-entry-1.lg h2 {
font-size: 40px;
line-height: 1;
}
.post-meta {
font-size: 11px;
letter-spacing: 0.07rem;
text-transform: uppercase;
font-weight: 600;
font-family: var(--font-secondary);
color: rgba(var(--color-black-rgb), 0.4);
margin-bottom: 10px;
}
What could be the issue?
I can see that your CSS class name of .post-entry-1 is the main wrapper that wraps all contents of your post, and you gave margin-bottom value of 30px.
Maybe you may try delete it? Or, please take a look at .mx-1.
I can't change the background color with my css stylesheet.
Here is the HTML (using Django); there are at present three listings in listings.
{% for listing in listings %}
<ul>
<li class="item"><img src="{{ listing.pic}}"> {{ listing }}</li>
<div class="item-description">{{ listing.description }}</div>
</ul>
{% endfor %}
Here is the CSS
body {
padding: 10px;
background-color: green !important;
}
ul {
list-style: none;
background-color: green !important;
}
.item {
background-color: blue !important;
height: 200px;
}
.item-description {
background-color: purple !important;
}
As you can see I have already tried adding !important and giving elements a height. There is also a link for bootstrap which I tried deleting. However, nothing has any effect; the page and all elements remain white.
I am trying to build a paywall using HTML and CSS in Django, but somehow the CSS that is supposed to fade portions of the text does not render. Here is what I have:
<style>
.adjust-image {
display: block;
width: auto;
max-width: 100%;
max-height: 1000px;
}
.blur-text {
filter: blur(5px);
user-select: none;
pointer-events: none;
}
.fade-out {
user-select: none;
position: relative;
}
.fade-out:after {
content: "";
height: 75%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
#paywall-wrapper {
padding: 35px;
border-radius: 5px;
position: relative;
margin-bottom: 30px;
box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.20);
}
#paywall-wrapper * {
text-align: center;
}
#paywall-wrapper .btn {
left: 50%;
transform: translateX(-50%);
position: relative;
}
</style>
<div class="display-margins">
<div>
<h5>{{solution.questionToProblem}}</h5>
<h6><b>Solution</b></h6>
{% if request.user.is_anonymous or solution.free != True and request.user.is_subscriber != True %}
<p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>
<div id="paywall-wrapper">
<h4>Premium Subscription</h4>
<p>To view this solution, get our subscription for just <strong>$17</strong>.</p>
<a class="btn btn-primary text-light" href = "{% url 'subscribe' %}">Subscribe</a>
</div>
{% else %}
<p class="noselect format-paragraph">{{solution.solutionToProblem|safe}}</p>
{% for s in solution_images %}
<img class = "adjust-image noselect" src="{{ s.photo.url }}">
<br></br>
{% endfor %}
{% endif %}
{% render_comments solution request %}
<br class= "extra_spacing"></br>
</div>
</div>
Ideally, the text for paywall is supposed to fade out like this:
But it doesn't render when I have template variables in my <p> tags:
Surprisingly enough, if I type out content in my <p> tags manually, it works. But when I use <p>{{random content}}</p>, it doesn't work.
What am I doing wrong with my CSS or my HTML when I say <p class= "format-paragraph fade-out:after">{{solution.solutionToProblem|safe}}</p>?
Make sure when you want CSS integrated in Django, and you have HTML in your template variable, use:
{{put_your_template_variable|striptags}}
instead of safe.
I created a landing page like below:
I place the text and buttons in a div container and the alignment is correct but I am trying to move it below the logo so it looks naturally better. I tried using bottom to adjust the positioning but it does not reflect anything.
My code:
<body style="font-family:Verdana;color:#aaaaaa;">
<div class="backgroundImage logo">
<b>{{ __('SIGN UP AS A DEALER') }}</b>
<div class="container" >
<h1 > A home is made of <i>
<p >hopes</p></i> and <i><p >dreams</p> </i>
</h1>
<h1 >Let us<i> <p >inspire</p></i> you to build the perfect home!</h1> <br>
<a href="/login " class="btn grad1" ><b>{{ __('LOGIN') }}</b></a>
<b>{{ __('SIGN UP') }}</b>
</div>
</div>
</body>
SASS:
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
* {
box-sizing: border-box;
}
a.btn {
color: black;
border-radius: 10px;
background-color: #fbcc34;
}
h1 {
color: white;
}
.a {
top: 50%;
}
p {
display: inline;
font-size: 75px;
font-family: "Dancing Script" cursive;
font-family: "Tangerine", cursive;
}
text-align: center;
position: relative;
top: 50%;
// Add media query for mobile devices
#media (max-width: 767px) {
h1 {
font-size: 120%;
float: left;
}
p {
font-size: 170%;
}
.backgroundImage {
background-image: url(/images/homepage.jpg);
background-repeat: no-repeat;
background-position: center;
}
}
Can anyone point out why is it not positioning to the center?
Edit:
The positioning is now fixed but however when I switch to mobile layout, it goes like below:
How do I center the first sentence?
so you have to set position so bottom,left,right,top works!
.container {
position: relative;
text-align: center;
bottom: 30px;
}
Try that!
Try the margin-top property, for example: <div class="container" style="margin-top: 200px;">.
Do you want to move only button or along with that text too? If you want to move only button use this:
<div class="backgroundImage logo">
<b>{{ __('SIGN UP AS A DEALER') }}</b>
<div style="padding-top:40%"></div>
<div class="container" >
<h1 > A home is made of <i>
<p >hopes</p></i> and <i><p >dreams</p> </i>
</h1>
<h1 >Let us<i> <p >inspire</p></i> you to build the perfect home!</h1> <br>
<a href="/login " class="btn grad1" ><b>{{ __('LOGIN') }}</b></a>
<b>{{ __('SIGN UP') }}</b>
</div>
</div>
Or you want to bring only buttons just replace that div before the button.
And I'm not sure about here 40%, please give which will suit you. Many would say it's not a proper way to get the result but we can do as this too.
So, for the past hour I've being trying to move this image using the css property position. My problem is every time I move it using top or bottom it doesn't work correctly. Here's a screenshot of it before using said properties and after. Below you can find my html & css. Lastly, this position has to be absolute or the image completely disappears.
HTML
<section class="row posts">
<div class="col-md-6 col-md-offset-3">
<header><h3>What others have to say...</h3></header>
#foreach($posts as $post)
<article class="post" data-postid="{{ $post->id }}">
<p>{{ $post->body }}</p>
<div class="info">
Posted by {{ $post->user->user_name }} on {{ $post->created_at }}
</div>
<div class="interaction">
|
Dislike
#if(Auth::user() == $post->user)
|
Edit |
Delete
#endif
</div>
</article>
#endforeach
</div>
</section>
CSS
.heart{
background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
background-position: left;
background-repeat: no-repeat;
height: 50px; width: 50px;
cursor: pointer;
position: absolute;
left: 12px;
bottom: 5px; //This or 'top' is what causes my entire problem
background-size:1450px;
}
.heart:hover {
background-position: right;
}
How about adding this :
.interaction {
position: relative;
}
I think you should put the no-repeat at the same line as the background
It just work for me,i don't know why
https://jsfiddle.net/moongod101/2wh6b9rq/