I have two rows, the top contains text, and the one underneath contains a set of cards. Is it possible to have the cards scroll under the text so that they are no longer visible?
<div id="main-container" class="container">
<div id="title-row-small" class="row">
<div class="container center">
<div class="show-on-small-only hide-on-med-and-up">
<p id="title-text">Scott and Viki</p>
<p id="date-text">23/06/18</p>
</div>
</div>
</div>
<div id="card-row" class="row">
<div class="col s12 m6 l4">
<a href="#" onclick="$('#agenda-modal').modal('open');">
<div class="card">
<div class="card-image">
<img src="./assets/SVSunset.jpg">
<span id="card-title" class="card-title">Agenda</span>
</div>
</div>
</a>
</div>
</div>
</div>
The small amount of CSS I've added allows the cards to scroll underneath but they are no longer positioned under the text y position, the text is no longer centered and scaling correctly and I have no idea how to make the cards disappear behind the text instead.
#card-row {
top: 0;
position: relative;
}
#title-text {
margin-top: 5px;
margin-bottom: 0px;
font-size: 80px;
font-family: "Calling Angels Personal Use";
text-shadow: 4px 4px 12px #fff;
}
#date-text {
margin-top: 0px;
margin-bottom: 0px;
font-size: 45px;
font-family: "Strawberry Whipped Cream";
text-shadow: 2px 2px 2px #fff;
}
I would appreciate any help. I'm sure this is basic but I'm just learning at the moment and googling didn't help me much as you can see.
Thanks
Related
enter image description here
when screen size is normal
problem
enter image description here
when resizing the screen
I want the text to stay on the right side of the image all the time and never overlap in desktop and mobile
html
I also used bootstrap
<div id="moreNews" class="row">
<div class="col-lg-4 row rowCard">
<div class="col-lg-4">
<img class="imageSize" src="assets\images\image-retro-pcs.jpg" alt="">
</div>
<div class="col-lg-8 moreNewsCol">
<h2 class="moreNewsH2 ">01</h2>
<h3 class="moreNewsH3 ">Reviving Retro PCs</h3>
<p class="moreNewsP ">What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="col-lg-4 row rowCard">
<div class="col-lg-4 moreNewsCol">
<img class="imageSize" src="assets\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-8 moreNewsCol">
<h2 class="moreNewsH2 ">02</h2>
<h3 class="moreNewsH3 ">Top 10 Laptops of 2022</h3>
<p class="moreNewsP ">Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="col-lg-4 row rowCard">
<div class="col-lg-4">
<img class="imageSize" src="assets\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-8 moreNewsCol">
<h2 class="moreNewsH2">03</h2>
<h3 class="moreNewsH3">The Growth of Gaming</h3>
<p class="moreNewsP ">How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
and CSS
body {
text-align: center;
margin: 6% 12% 6% 12%;
}
#moreNews {
margin: 0;
margin-top: 5rem;
}
.imageSize {
width: 6rem;
}
.moreNewsH2{
float: right;
text-align: left;
padding-right: 85%;
color: hsl(233 8% 79%);
}
.moreNewsH3{
text-align: left;
color: black;
font-size: 1.2rem;
}
.moreNewsP{
text-align: left;
color: gray;
font-size: 0.9rem;
}
.moreNewsCol{
text-align: left;
}
.rowCard {
margin-right: 0.7rem;
}
.attribution {
margin-top: 6rem;
}
I spend hours messing with code but I didn't got the solution
I want the text to stay on the right side of the image all the time and never overlap in desktop and mobile
I have three divs side to side, I want them to stack on top of each other when screen gets smaller. instead, the divs resize making content look bad.
I followed the w3schools tutorial (bootstrap_grid_stacked_to_horizontal) to make them stack by putting them inside a container div and a row div in addition to adding the class col-lg-4 but they still resize.
This is relevant HTML and CSS:
.how-it-works-container{
padding: 50px;
background-color: #C5B358;
font-family: 'Montserrat', sans-serif;
opacity: .8;
text-align: center;
width: 100%
}
.how-it-works-box{
padding: 30px;
background-color: #D6C362;
margin: 20px 5px;
width: calc(30%);
overflow-wrap: break-word;
color: white;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<!-- How It Works section -->
<div class="how-it-works-container container">
<h2>How It Works</h2>
<div class="row">
<div class="how-it-works-box col-lg-4">
<img src=" {% static "images/meetlocals3.svg" %} ">
<h3>Meet Local People</h3>
<p>Meet like-minded locals who could show you around their city.</p>
</div>
<div class="how-it-works-box col-lg-4">
<img src=" {% static "images/showpeople.svg" %} ">
<h3>Show Visitors Around</h3>
<p>Show visitors around and meet interesting international visitors.</p>
</div>
<div class="how-it-works-box col-lg-4">
<img src=" {% static "images/makefriends.svg" %} ">
<h3>Make New Friends!</h3>
<p>Walking around is a fun bonding activity to make new friends!</p>
</div>
</div>
</div>
The CSS is overriding the Bootstrap grid. Put the boxes inside the Bootstrap grid columns which will auto stack on xs screens..
http://www.codeply.com/go/gTkC50Paql
.how-it-works-container{
padding: 50px;
background-color: #C5B358;
font-family: 'Montserrat', sans-serif;
opacity: .8;
text-align: center;
}
.how-it-works-box{
width: 100%;
padding: 30px;
background-color: #D6C362;
margin: 20px 5px;
overflow-wrap: break-word;
color: white;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="how-it-works-container container-fluid">
<h2>How It Works</h2>
<div class="row">
<div class="col-lg-4">
<div class="how-it-works-box">
<img src="">
<h3>Meet Local People</h3>
<p>Meet like-minded locals who could show you around their city.</p>
</div>
</div>
<div class="col-lg-4">
<div class="how-it-works-box">
<img src="">
<h3>Show Visitors Around</h3>
<p>Show visitors around and meet interesting international visitors.</p>
</div>
</div>
<div class="col-lg-4">
<div class="how-it-works-box">
<img src="">
<h3>Make New Friends!</h3>
<p>Walking around is a fun bonding activity to make new friends!</p>
</div>
</div>
</div>
</div>
As you know bootstrap have 12 Columns so you need to add col-xs-12 along with col-lg-4 then for extra small screen every div will take all 12-columns.
<div class="col-lg-4 col-xs-12">
<div class="how-it-works-box">
<img src="">
<h3>Meet Local People</h3>
<p>Meet like-minded locals who could show you around their city.</p>
</div>
</div>
<div class="col-lg-4 col-xs-12">
<div class="how-it-works-box">
<img src="">
<h3>Show Visitors Around</h3>
<p>Show visitors around and meet interesting international visitors.</p>
</div>
</div>
<div class="col-lg-4 col-xs-12">
<div class="how-it-works-box">
<img src="">
<h3>Make New Friends!</h3>
<p>Walking around is a fun bonding activity to make new friends!</p>
</div>
</div>
and it is good to add tags for all sizes. col-md- and also for col-sm- .
This is what I'm trying to do, in between the two pink lines is my max width.
This is what I'm getting:
I'm getting close:
This is my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
<div class="row">
<div class="col-md-2">
<img src="img/FB_LINK.png" alt="Follow us on Facebook"></div>
<div class="col-md-2">
<img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></div>
<div class="col-md-2">
<img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></div>
</div>
<div class="row">
<div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
</div>
</div>
</div>
</footer>
This is my CSS for this section:
footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
footer.a{
display:inline-block;
margin:0 auto 0 auto;
}
h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}
I can't seem to figure this out, I've drawn it out on a couple sheets of paper, but I can seem to style like like I'd like. Can anyone point out where I'm going wrong?
After trying your the posted code I found that you are using wrong quote pair.
Also the css you gave isn't designed to achieve the goal.
I made a working fiddle here. Check it out
HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 parent">
<p>GET SOCIAL WITH US!</p>
<div class="icon">
<img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook">
<img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter">
<img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></div>
</div>
<div class="col-md-6">
<p class="copyright">© 2016 COPYRIGHT LINE</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
.copyright {
padding-top: 40px;
}
footer p {
color: #fff;
}
footer a img {
display: inline-block;
width:50px;
}
.parent .icon {
margin: auto 7px;
}
It looks like your second col-sm-6 is nested too deep. It should be at the same level of the other one, not within it. Your divs are all sitting on half the grid (6 wide) and then the three social logos are taking half of that, and the copyright bit is taking the other half. You need the col-sm-6 divs to be siblings.
Furthermore, I don't think col-sm-6 looks like it'll work, looking at what you're trying to achieve. You might want to make the first group col-sm-3 or so and add an offset class to the copyright part. :-)
There are at least 3 errors in your HTML markup:
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
The ending quote should be double ("), not single (')
Since you place it in a column, the class name of this tag should be container-fluid, not container
</div>
<div class="row">
<div class="col-sm-6">
Missing close tag, the div .row is not neccessary.
</div>
</div>
</div>
<div class="col-sm-6">
Please see the fixed code here
So, I'm trying to get this to display properly on mobile phone for the class 'circle-right right' div. Right now, instead of being centered, the circle-right class is displaying too far to the right instead of center. On desktop it displays correctly.
<div class="path-container">
<div class="row">
<div class="large-12 columns ">
</div>
</div>
<div class="row path-item">
<div class="large-7 push-5 columns">
<div id="img1" class="circle circle-left "></div>
</div>
<div class="large-5 pull-7 columns path-text left">
<h3 id="pstop1">Get in touch!</h3>
<a class="pathlinks" href="#" data-reveal-id="myModal">Get in touch>></a>
</div>
</div>
<div class="row path-item">
<div class="large-7 columns">
<div id="img2" class="circle circle-right right"></div>
</div>
<div class="large-5 columns path-text right">
<h3 id="pstop2">Give us feedback!</h3>
<p class="shadow">We're not happy unless your satisfied. During the process, we'll be in touch to make sure we're on the right track.</p>
Get in touch>>
</div>
This is most of the default css that comes with the foundation path template. Tried using media query to select the class and adjust the position, but it wont work. Here's a link to the template http://patterntap.com/code/responsive-timeline
css:
.path-container .path-item .circle.circle-right {
right: 100px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
right: 0;
left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
I wish to have the span tag float left and have the <section> floated left beside it also. But the <section> sits below the span.
I would imagine it has something to do with setting the widths of the elements but I want it to be responsive and flex.
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="highlight-sub"><em>Start using your card today</em></h3>
</div>
<div class="col-md-8">
<div class="col-md-4">
<span class="step">1</span>
<section>
<h4 class="highlight-prim">Complete Form</h4>
<p class="highlight-sub">Simply fill in our online form and your account will created.</p>
</section>
</div>
<div class="col-md-4">
<span class="step">2</span>
<section>
<h4 class="highlight-prim">Receive by Post</h4>
<p class="highlight-sub">You will be sent your new card in post.</p>
</section>
</div>
<div class="col-md-4">
<span class="step">3</span>
<section>
<h4 class="highlight-prim">Start Enjoying</h4>
<p class="highlight-sub">Present your new card to any of our partners for al the benifits.</p>
</section>
</div>
</div>
</div>
</div>
#mid-content span.step {
border: 2px solid #A99269;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #A99269;
display: inline-block;
font-weight: 300;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
font-size: 32px;
float: left
}
#mid-content section {
display: inline-block;
float:left
}
Float to the left only the .step element, and give to the section a left margin equal to the total width of the .step (with total i mean including borders..)
demo at http://jsfiddle.net/sqD6Q/
(with arbitrary margin since i do not know your currest styles to calculate the margin..)
Yes, probably the content of the section is almost 100% of the row, and it goes to the second row. You can place the span inside the section