I've seen many websites, usually ones with large amounts of images or large resolutions, use this technique. My question is, how do use it properly?
From the articles I've read on here as on other forums and blogs here is my base code:
<div class="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-width="1800" data-height="1200">
<img src="https://files.catbox.moe/jhk4lf.jpeg">
</div>
Is this how it is suppose to be set up?
Related
TL;DR how can I get the images to fill the grid squares on this page.
I am working on a site I inherited that has been through three different web designers so it's a bit of a mess on the back end. It also uses timber/twig/acf which were new to me so I spent last week trying to figure out how everything is configured. I was trying to replicate this archive page so was playing around with the CSS but when I left work Friday everything was fine...this morning suddenly the images don't fill the grid squares. I don't know if something I did changed it and it was delayed bc of caching or if there was an update or what but I would love to change it back before anyone notices. I actually have the old version of the page still open where the images do fill grid squares and have spent all day looking through the code to see what changed but can't find any difference.
It's this css rule that preventing it from taking 100% width:
.rtr-6-grid:not(.knowledge-cta) .p-absolute.p-center div {
width: 470px;
}
Change this :
<div class="d-flex d-flex--y-center d-flex--x-center p-absolute p-center rtr-fill">
<div>
<img src="..." width="1779" height="1779">
</div>
</div>
To this :
<div class="p-absolute">
<div>
<img src="..." width="auto">
</div>
</div>
I have a bit of an unusual question, but I'm stuck and thought someone here may know. I basically want to create a membership overview/comparison as included and was wondering how one would build it most efficiently/best, especialyl the part highlighted in red.
Would you tackle it with CSS and build each single element? Or would you rather do it in photoshop and include such pictures via code e.g. as background image?
Given that it's still code related (i.e. is it possible / efficient to build this with CSS), I hope the question is valid and someone could shed some light onto this! (I dont expect any code solution at all, just would like to understand if CSS/SVG coding is the most efficient way).
Thanks a lot for any help!!
You could create a single SVG element and just reuse it across the three different columns, changing the fill (orange/gray/blue).
The best you can do is to use bootstrap to reach this:
<div class="container">
<div class="col-sm-3">
<!-- Column one, detail list -->
</div>
<div class="col-sm-3">
<!-- Column two, first membership option -->
</div>
<div class="col-sm-3">
<!-- Column third, second membership option -->
</div>
<div class="col-sm-3">
<!-- Column four, third membership option -->
</div>
</div>
you'll get a responsive well designed behaviour:
https://jsfiddle.net/zzhs5w6n/2/
The part that you marked in red are only images.
You can find some for free googling a bit, or you can design yourself using photoshop, illustrator, or even gimp or microsoft paint if you want.
Then, in the example, you must add responsiveness to this images, check the next complete fiddle:
https://jsfiddle.net/zzhs5w6n/10/
Then, you can add more bootstrap css or your main css to adapt it to whatever you want/need.
Hope it helps
I don't expect the answers here to add much to the 21st century's understanding of computer science, but I am grateful for the help of the community.
I have an image I'm trying to center in bootstrap. It's in a .container-fluid, a .row, and a .col-xs-6 with .offset-xs-3. The <img...> itself is .img-responsive. You can see the project on this codepen: http://codepen.io/NotAnAmbiTurner/pen/GrGmaq?editors=1000.
The image is not centering - I should be able to get an image that scales with the viewport width (a la SVG) and is in the middle of the page. I can't seem to manage that.
I'm wondering if it has something to do with the fact that I'm taking a "raw" image from dropbox as my src, that the image is a .jpg, or some combination? Then again, I'm a noob at this, so it's equally possible that there's just a typo somewhere I can't seem to find. I have been over the bootstrap docs, and various SO questions to no avail. The only solution I have found is removing the <img...> from the container and row, and assigning ... class="centered-block" .... Unless I'm fundamentally misapprehending something, however, (1) I shouldn't have to do that, and (2) rather than bashing through I'd like to understand what my conceptual error is in any case, for my own learning.
PS - totally unrelated, but my <a ...></a> tags don't seem to be clickable. If anyone has any ideas there, that would be great too.
It turns out the basic issue is that CodePen relies on Bootstrap 4, not (as I had assumed) Bootstrap 3.
You're using classes from Bootstrap 3 but loading the stylesheet from Bootstrap 4; they aren't compatible across the board. img-responsive no longer exists as well as the col-xs-* classes. See Images and Grid Options.
Note: Your links won't work because they aren't valid HTML and you're also closing your h2 with an h3, validate your markup.
Working Example:
#media (max-width: 480px) {
h1 {
font-size: 5vmax;
}
h2 {
font-size: 3.5vmax;
}
h3 {
font-size: 2.5vmax;
}
li {
font-size: 2.5vmax;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
<h1 class="text-primary">Dr. Clair Cameron Patterson</h1>
<h2 class="text-secondary">The man who first learned the age of the Earth, and helped save a civilization from the dangers of its use of lead.</h2>
<div class="container-fluid">
<div class="row">
<div class="col">
<img src="https://www.dropbox.com/s/91fw6aazyxzb178/image-for-codecamp-tribute-page.jpg?raw=1" alt="Cartoon Image of Clair Cameron Patterson at Congressional Hearing" class="img-fluid mx-auto d-block" style="padding:1.5vmin">
</div>
</div>
</div>
<h3>Academics</h3>
<ul>
<li>Undergraduate, Grinnell College</li>
<li>PhD, University of Chicago</li>
<li>Researcher, California Institute of Technology</li>
</ul>
<h3>Brief Timeline</h3>
<ul>
<li><strong>1956</strong>: found the earth to be 4.55 Billion years old using lead-lead dating and
a fragment of a metorite that fell in Arizona. This calculation has been largely undisturbed since.</li>
<li><strong>1965</strong>: began campaign against lead in various products, especially gasoline, which at that time was emitting lead into the atmosphere.</li>
<li><strong>1978</strong>: wrote a 78-page minority opinion as part of a National Research Council (NRC) panel stating that controls on lead in various products had to start immediately, including gasoline, food containers, paint, glazes, and water distribution
systems.
</li>
<li>by the late <strong>1990s</strong>: levels of lead in Americans' blood has dropped by up to 80%. Though connections with Dr. Patterson's work are not clear, as the leading researcher in the area, and constant campaigner against the use of lead, it
is likely he was a major antecedant of this change.</li>
</ul>
</div>
I am creating an about us page in Jekyll. I am using hyde theme which is based on poole.
I am trying to add headshots of the people involved with a basic profile about them. The issues is that I am not able to manage that in two columns. I do not know whether that will affect the responsiveness of the website (as I have so far not succeeding in getting two columns side by side).
I tried looking at the source code of poole's website. They used a css class called themes for that. I tried taking that approach but did not succeed in getting a two columns layout.
How can I keep my site responsive to mobile layout and still create a two column layout for content?
EDIT: Code for the creation of multiple columns.
<div class = "themes"> // class to create columns
<div class="circle" style="background-image: url('/public/nitesh.jpg')">
</div>
</div>
<p> Mr. Nitesh Pandey<br> <nitesh.osf#gmail.com> </p>
<div class = "themes"> // class to create another column beside the one above.
<div class="circle" style="background-image: url('/public/parth.jpg')">
</div>
</div>
<p> Mr. Parth Bolke </br> <parth.osf#gmail.com>
Since I couldn't find anything on yui3 documentation, I kindly ask your opinion on below. What is the best practice and why?
<div class="yui3-u-1-3" id="logo">
... content
</div>
or
<div class="yui3-u-1-3">
<div id="logo">
..... content
</div>
</div>
Regards,
Castle
I consider best practice to use ID's on the purely layout specific HTML.
eg.
#outer-container
#wrapper
#sidebar
Having said that if there is any chance, even a remote one that you may have multiple instances of these in your page, then play safe and use classes.
There are some performance benefits (although it's almost negligible now, with faster browser rendering engines and speeds):
ID selectors are slightly faster in your CSS
ID selectors are more efficient as hooks using JS
Read this great section from Jonathan Snook's SMACSS e-book: https://smacss.com/book/type-layout
I would rather use CLASS over ID until something explicit, have been using yui3 grid since last 2 years for now. so far going great..
<div class="yui3-u-1-3 logo">
content
</div>
or
<div class="yui3-u-1-3">
<h5 class="logo">logo goes here</h5>
</div>