I have a basic SvelteKit app with root +layout containing some anchor tags with hash fragments.
<nav>
home
#10
#20
#30
</nav>
<div>
<slot />
</div
In my target route I have +page file containing a bunch of <p> tags, all with ids and a single CSS rule
<p id="1">
1. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga dicta
nostrum harum ad? Cumque recusandae deserunt voluptatum eveniet nostrum quod
sed. Fugit consequatur laboriosam voluptate quidem, velit commodi voluptatum
perferendis.
</p>
.
.
.
<p id="50">
50. Dicta harum nulla blanditiis sapiente molestias facere maiores. Quas
dolore omnis aliquid sapiente vel eius distinctio nulla amet. Ratione velit
sequi eius eos minima expedita harum consequuntur ab voluptas dolore!
</p>
<style>
:target {
background: red;
}
</style>
So, from my home page, when I click on they #20 link, it navigates to the target page with the correct URL (/target#20), it scrolls down to the correct position, but the styling is not applied. Only when I click on the #20 link a second time, does the styling get applied. From here, I can click on #10 and #30 and everything works. However, if I go back to the home page and click on a link with a fragment, the styling is missing.
Why does this happen, what am I missing? Any advice would be appreciated.
Full source https://github.com/cenuij/target-styling
Related
I am trying to implement the design attached at the bottom. I am going to use CSS-grid to the implement the full design, however, I'm facing some trouble as to how to implement the part I have circled out.
I have thought of separating the left and the right part into separate columns under a single row to implement the overall design.
Current design
Target design
I'll attach my existing code below for better reference
import "./Content1.css";
export default function Content1() {
return (
<div className="row">
<div className="col-1"></div>
<div className="col-7 content1-content">
<h3>Justo Vulputate Tortor Sem</h3>
<h5>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam deleniti
aliquam corrupti eius ratione rem veniam. Impedit qui obcaecati minus
at omnis delectus doloribus suscipit! In nesciunt maiores adipisci
inventore?
</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iusto
reiciendis harum a cumque itaque non, deleniti, reprehenderit maxime
necessitatibus eum natus magnam, quasi voluptatem sapiente. Harum
aliquid facilis inventore.
</p>
</div>
<div className="col-4"></div>
</div>
);
}
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 3 years ago.
I'm messing around with trying to target the first <p> tag in a div that has a data attribute of data-item="8"
So far, I've tried this:
[data-item="8"] p:first-child {
font-size: 1.8rem;
}
as well as this:
p:first-child [data-item="8"]{
font-size: 1.8rem;
}
and it's not picking up on the style change. Not sure if I am going about this all wrong or if I am missing something where that's not going to work.
HTML:
<div data-item="8">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse ut aliquid perspiciatis a aliquam repellat non ipsum necessitatibus distinctio quos molestias asperiores quis eaque, laudantium ipsam nulla adipisci quo nemo!</p>
<p>Quam soluta quis doloribus, ut cum iste cumque earum aliquam ratione! Fugiat nemo animi ut corrupti tempora, omnis nulla. Culpa a quibusdam sequi quia totam dolores magni ducimus nesciunt expedita.</p>
</div>
Here you go man. Just the wrong css selector.
https://codepen.io/jackgisel/pen/dyPxrOG
[data-item="8"] p:first-of-type {
...
}
<div class="mdc-card problem">
<section class="mdc-card__primary">
<h1 class="mdc-card__title mdc-card__title--large">title here</h1>
<h2 class="mdc-card__subtitle">subtitle here</h2>
</section>
<section class="mdc-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam nostrum nisi optio iusto excepturi sequi itaque. Vitae laudantium fugiat, id eius voluptates placeat labore magnam est saepe sapiente et molestias quaerat numquam excepturi illum dolores quam error, eaque rerum ea vero ipsum sequi. Sapiente adipisci reiciendis quod officia aliquam quidem praesentium cupiditate facere, magni nemo, asperiores, reprehenderit eveniet corporis eligendi et. Numquam voluptatem, consectetur. A harum quas, veritatis blanditiis, officia impedit voluptas laborum itaque delectus dolore explicabo aut, culpa iste sapiente repellat voluptate voluptates commodi dignissimos similique repudiandae. Nulla expedita atque dolore alias, facilis ipsam qui doloribus, iure quo animi.
</section>
<section class="mdc-card__actions">
<button class="mdc-button mdc-button--compact mdc-card__action">action 1</button>
<button class="mdc-button mdc-button--compact mdc-card__action">action 2</button>
</section>
</div>
.problem {
height: 350px;
width: 350px;
}
demo - the demo first row is full width no issues, the problem with second row with large supporting text, and third one with small supporting text
mdc-card - docs
how to deal with the width and height of the cards.
what the best way to handle this kind of issues
add only width demo
or
if all cards what to be in same height - add height, overflow: hidden; to mdc-card__supporting-text class demo
as of now ended like this
On a project I'm working on, there are a few places where there are two columns of text. As this is content manageable, I don't really want to make two separate text areas for the user to fill out, but rather one which I split into two columns with column-count: 2 in CSS. The content will be inside a single p element.
The issue is that I need to style the second column slightly differently. I need to change text-align to right, whilst keeping the first column text-align left.
I know I could do this in PHP and/or JavaScript, but I'd prefer to do this using CSS alone if possible.
Markup:
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p>
</div> <!-- /.content -->
CSS:
.content p {
column-count: 2;
}
As of now, there is no way to target columns in pure CSS. The closest you could get is using JavaScript to split it with new elements, or amend your markup.
This has been asked similarly before: https://stackoverflow.com/a/21238260/271271
Can you try using this:
table.secondcolumn td:nth-child(2) { text-align: left; }
or alternatively try this SO link
EDIT/Update: Apparently, there are no direct ways (via CSS) to style a specific text column via CSS.
For some odd reason when I create a new page with Visual Composer my content doesn't align at all, however when I edit an existing page that came with a template It does. Video Demonstration:
https://www.youtube.com/watch?v=Z1LFcmUs1tg
Your page has the following markup:
<div class="no-container stripe-video-content">
<div class="vc_col-sm-8 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left underline " style="color: #666666">
About Us </h3>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container ">
<div class="wpb_wrapper">
<h3 class="headline text-left " style="color: #666666">
Stuff we do best </h3>
<div class="vc_progress_bar wpb_content_element default small"><div class="vc_single_bar bar_grey"><small class="vc_label">Development</small><span style="width: 90%;" class="vc_bar" data-percentage-value="90" data-value="90"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Design</small><span style="width: 80%;" class="vc_bar" data-percentage-value="80" data-value="80"></span></div><div class="vc_single_bar bar_grey"><small class="vc_label">Marketing</small><span style="width: 70%;" class="vc_bar" data-percentage-value="70" data-value="70"></span></div></div>
</div>
</div>
</div>
which was apparently written by Visual Composer. The problem is coming from the class on the enclosing div: no-container which isn't sufficient to trigger Bootstrap to take care of the responsiveness. Therefore, if you can't figure out how to use VC (I don't use it) to create a div with .container, then you can use jQuery to remove the .no-container and add .container.
That code would be:
<script>
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});
</script>
You would add that code to bottom of the WYSIWYG, in text mode, on the page in question. Bear in mind, however, that if there are any other divs on that page with the same class .no-container, that they will also be affected and that the div you're targeting may then have other layout abberations within it if you add other content and/or elements. When I used my inspector to apply the class, it did come out perfect though.
Also, please be aware that it's best practice to include your scripts by linking to external files. While you may be able to get away with not doing it in this case, if you want to and have the ability to FTP into the site, the code that goes in the WYSIWYG would look like:
<script type="text/javascript" src="{the_file_path}/mycustomscript.js"></script>
where {the_file_path} points to wherever you upload the file. And finally the code in the file would look like this:
jQuery( document ).ready(function() {
jQuery( "div .no-container" ).addClass( "container" );
jQuery( "div .no-container" ).removeClass( "no-container" );
});