I'm trying to use background image on wordpress however it isn't working any help would be appreciated.
I have used inline styling for background image as I found other answers on here saying to do this but it still won't work.
<div class="container">
<div class="left" style =" <?php echo get_template_directory_uri(); ?>background-image: url('/img/img/6c0bfc47-d8d3-41f4-9c17-7fca574b5efc.jpg');">
</div>
<div class="right">
<h1>Windows and Glass</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dui a tortor facilisis, a ornare enim pretium. Duis turpis neque, porta tincidunt vehicula vitae, congue sed elit. Aliquam erat volutpat. Pellentesque lacinia ipsum vulputate, pretium ligula vitae, auctor augue. Ut volutpat ipsum quis ligula cursus, et pulvinar elit sollicitudin. Duis eu interdum libero. Sed dignissim fermentum eros id dapibus.</p>
</div>
</div>
Related
I faced with a problem with the vertical cards position in accordance with the design (image attached). Firstly I tried position it with the flexbox property but seems it's not the right way because it is just move element to the next line in a "natural flow" but I don't need such behaviour. The most closest solution was to set column-count: 2 property to the news__items class in parent container but I can't control the order in this case. I feel like display: grid can help here but can't figure out how to implement it yet. Note: images have the same height and width.
Here is the html and css markup:
.news__items {
column-count: 2;
}
<div class="news__items">
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h2 class="news__primary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">MFF in the News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
<div class="news__item">
<img src="../img/dummy-news-image.png" alt="news">
<div class="news__item-content">
<h3>Lorem ipsum</h3>
<h2 class="news__secondary-title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed purus dolor. Phasellus velit libero, dapibus sed felis non, laoreet ornare risus. Morbi imperdiet maximus justo, nec porttitor ligula bibendum non. Aliquam erat volutpat. Sed feugiat
nulla quis mollis egestas. Duis blandit volutpat justo id imperdiet. Maecenas dapibus in quam vitae egestas.</p>
</div>
</div>
</div>
What is the best approach to implement such grids?
Try this solution.
.news__items {
display: table;
}
.news__item {
width: 50%;
float: left;
}
I am working on my portfolio page and as I was writing my html and my css, the site wasn't scrolling. I can't see the code only the first section.
Here is the html:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
here is a codepen edit: https://codepen.io/bogdan-pavel/pen/pobgWjg
Your navbar is missing a closing tag. If you ad </navbar> after the navbar is done the rest will scroll.
Try this:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
<navbar>
I'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
I'll try and explain this challenge... I have three divs, ordered for mobile first in a bootstrap WordPress theme.
[1] NAV
[2] CONTENT
[3] SIDEBAR
This code, works fine:
<div class="container">
<div class="row">
<div class="col-md-4"><p>NAV</p></div>
<div class="col-md-6 col-md-pull-right" ><p>MAIN CONTENT : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et diam et erat imperdiet scelerisque ac a leo. Etiam eu ultrices tortor, a aliquet felis. Morbi sit amet placerat mi. Nulla feugiat id sem non faucibus. Nunc tortor turpis, faucibus non nisi sit amet, bibendum tincidunt arcu. Duis id risus porttitor, porttitor massa eget, elementum ligula. Proin ullamcorper, lacus quis porta luctus, dolor enim hendrerit massa, varius gravida est ipsum quis elit. Quisque ex felis, commodo a placerat non, egestas eu turpis. Praesent sit amet lobortis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta nibh non erat suscipit, et rhoncus mauris finibus. In hac habitasse platea dictumst. Quisque quam mauris, sagittis ut orci eget, tempor sollicitudin nunc. Mauris consequat ex quis dolor viverra, ac dictum eros dapibus.</p></div>
<div class="col-md-4 col-md-pull"><p>SIDEBAR</p></div>
</div>
</div>
However, on full desktop view, the sidebar displays after the main content finishes, and I need it to display directly beneath the left hand side nav - i.e.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
[3 ----SIDEBAR----] [2------------CONTENT CONTINUED-----]
------------------------- [2------------CONTENT CONTINUED-----]
Instead, it displays like this.
[1 ------ NAV -------] [2------------------CONTENT -----------------]
________________[2------------CONTENT CONTINUED-----]
________________[2------------CONTENT CONTINUED-----]
[3 ----SIDEBAR----]
I don't usually do advanced CSS like this, and have been let down by my contractor, if anybody could help, and at least let me know if this is possible or not that would be much appreciated.
Also this is my first post here, so apologies if this isn't in standard format etc.
Regards
Simon
I am new to web development. I want achieve something like this.
Here, the "Edit" portion can be of any width and the text block can be of any height. Irrespective of any height or width, I want to keep the layout the same.
I have tried something like this
HTML
<form class="form-horizontal form-group-sm">
<div class="form-group">
<label for="text" class="col-sm-4 control-label">Address</label>
<div class="col-sm-8 clearfix">
<?php if($condition) { ?>
<span class="settings">
<i class="glyphicon glyphicon-pencil"></i>Edit
</span>
<?php } ?>
<label class="form-control-static">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique elit ac dolor elementum sit amet tempus ante euismod. Aenean quis enim urna, non pulvinar nunc. Aenean in varius elit. Vestibulum sed mollis tellus. Nullam id magna ligula, quis elementum turpis. Morbi felis felis, vestibulum dictum mattis commodo, suscipit et nunc. Fusce in semper nisi. Vivamus et sem velit, sed sagittis turpis. Aenean sollicitudin elit sed eros posuere id vehicula ipsum tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi diam odio, tempus sed sollicitudin eu, ullamcorper ullamcorper erat. Nullam tortor dolor, porttitor eget feugiat nec, aliquet non orci. Integer eros risus, luctus in mollis quis, scelerisque quis odio. Fusce vehicula sagittis justo, sit amet mollis sem adipiscing a. Sed semper, dui sed convallis interdum, libero felis posuere est, at pulvinar orci felis et lectus.</label>
</div>
</div>
CSS
.form-control-static{word-wrap: break-word;}
.settings{
float: right;
padding: 7px 0 7px 3px;
}
I do not want to fix height or width of any element as shown here since my layout is responsive. Checkout my fiddle and please update it if possible. Thanks in advance.
I have updated the fiddle.Were you trying to achieve that.Check them.
<form class="form-horizontal form-group-sm">
<div class="form-group">
<label for="text" class="col-sm-3 control-label">Address</label>
<div class="col-sm-8 clearfix">
<label class="form-control-static">
<button class="btn btn-default btn-xs pull-right">edit</button>
Lorem ipsum
</label>
</div>
</div>
UPDATED FIDDLE
http://jsfiddle.net/u83gse13/5/