The page with the issue:
https://www.fastforwardcomposites.com/foiling-luxury-catamaran-eagle-class
My client is experiencing stretched images on Safari or Mac OS/Macbook only. I can't test why or fix it because I do not own a Mac. Wondering if there is anything I can do that fits within my code to prevent image stretch WHILE keeping the aspect ratio of the pictures and scaling up and down correctly on all screen sizes. I have set the width to a %, and the height to "auto". The code in question is a little long because it is housed inside a big tabbed content area, but you can safely assume any images that I've styled to be responsive within the tabs are stretching poorly on Mac (you can ignore the gallery tab, that's working fine).
Is there any way to set the images to be responsive and snap down to fit the size of the container as the screen is resized on Safari without using set px values? Or is my only option to set the images to a specific PX height and width for every single possible screen size? I'd obviously like to avoid that, as the images are already responsive and resize quite nicely on all other browsers and OS. Thanks guys!
/* ======================================================================== *
* * * * * * * * * * * * * * * * * * TABS * * * * * * * * * * * * * * * * * *
========================================================================== */
.tabs {
position: relative;
margin: 40px auto;
width: 92%;
max-width: 100%;
overflow: hidden;
padding-top: 10px;
margin-bottom: 60px;
}
.tabs input {
position: absolute;
z-index: 1000;
width: 12.4857142857%;
height: 50px;
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
margin: 0;
}
.tabs input#tab-2 {
left: 12%;
}
.tabs input#tab-3 {
left: 24%;
}
.tabs input#tab-4 {
left: 36%;
}
.tabs input#tab-5 {
left: 48%;
}
.tabs input#tab-6 {
left: 60%;
}
.tabs input#tab-7 {
left: 72%;
}
.tabs input#tab-8 {
left: 84%;
}
.tabs label {
background: #e1e1e1;
color: #333;
font-size: 14px;
line-height: 50px;
height: 56px;
border-radius: 0;
position: relative;
top: 0;
padding: 0 20px;
float: left;
display: block;
width: 12.5%;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
box-sizing: border-box;
-webkit-transition: all 150ms ease 0s;
transition: all 150ms ease 0s;
}
.tabs label:hover {
cursor: pointer;
}
.tabs label:after {
content: '';
background: #d8d8d8;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}
.tabs input:hover + label {
background: #b9b9b9;
}
.tabs label:first-of-type {
z-index: 4;
}
.tab-label-2 {
z-index: 4;
}
.tab-label-3 {
z-index: 3;
}
.tab-label-4 {
z-index: 2;
}
.tabs input:checked + label {
background: #f0f0f0;
color: #1a1a1a;
z-index: 7;
}
.clear-shadow {
clear: both;
}
.content {
height: auto;
width: 100%;
float: left;
position: relative;
z-index: 7;
background: #f2f2f2;
top: -10px;
box-sizing: border-box;
}
.content div {
position: relative;
float: left;
width: 0;
height: 0;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
background: #f2f2f2;
}
.content .ec-container, .content .ec-container .gallery, .content .ec-container .gallery div {
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
margin: 20px auto 0 auto;
}
.content div h2 {
margin-top: 0;
}
.tabs .tab-selector-1:checked ~ .content .content-1,
.tabs .tab-selector-2:checked ~ .content .content-2,
.tabs .tab-selector-3:checked ~ .content .content-3,
.tabs .tab-selector-4:checked ~ .content .content-4,
.tabs .tab-selector-5:checked ~ .content .content-5,
.tabs .tab-selector-6:checked ~ .content .content-6,
.tabs .tab-selector-7:checked ~ .content .content-7,
.tabs .tab-selector-8:checked ~ .content .content-8 {
z-index: 100;
opacity: 1;
//width: 100% / $numberOfTabs;
width: 100%;
height: auto;
width: 100%;
height: auto;
padding: 4.5%;
}
.content div h2 {
text-align: left;
color: #21bca9;
font-size: 25px;
text-transform: uppercase;
}
.content div p {
font-size: 14px;
line-height: 22px;
text-align: left;
margin: 0;
color: #222;
}
.content-6 {
background-image: url(https://www.lancewalker.life/images/specs/eagle-class-specs-image-4.jpg) !important;
background-position: 5% 100% !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.tabs-link {
color: #777;
text-decoration: underline !important;
}
.tabs-link:hover {
color: #9e9e9e;
}
.tab-img-lg {
display: flex;
margin: 10px auto 60px auto;
width: 100%;
}
.tab-img-vert {
margin: 0 auto;
display: flex;
width: 32% !important;
max-width: 32% !important;
justify-content: space-around;
}
.tab-img-container {
display: flex;
width: 100% !important;
flex-direction: row;
height: unset!important;
opacity: 1 !important;
margin: 60px auto 0 auto;
justify-content: center;
flex-wrap: wrap;
}
.img-tabs-container {
width: 100% !important;
opacity: 1 !important;
display: flex;
height: unset !important;
flex-wrap: wrap;
}
.tab-img-container-col {
display: flex;
width: 48% !important;
height: unset!important;
opacity: 1 !important;
margin: 0 auto 0 auto;
flex-direction: column;
}
.tabs ul li {
font-size: 14px;
line-height: 30px;
text-align: left;
margin: 0;
color: #222;
}
.img-main-tabs {
width: 100%;
}
.img-below-content-tabs-vert {
max-width: 32% !important;
margin: 10px auto;
height: auto !important;
}
.img-below-content-tabs {
max-width: 32% !important;
margin: 10px auto;
height: auto !important;
}
#media screen and (max-width: 999px) {
.img-below-content-tabs-vert {
display: none;
}
.img-below-content-tabs {
display: none;
}
.img-tabs-container {
display: none;
}
.img-below-content-tabs-mobile {
display: flex;
margin: 10px auto;
height: auto;
}
}
#media screen and (min-width: 1000px) {
.img-below-content-tabs-mobile {
display: none;
}
}
#media screen and (max-width: 800px) {
.gallery img {
max-width: ~"calc(50% - 40px)";
margin: 20px;
transition: opacity 200ms;
cursor: pointer;
}
.gallery-no-lb-2-items div {
max-width: 90%;
margin: 20px;
}
.asyncGallery__Dots {
bottom: 15px;
}
.asyncGallery__Counter {
right: 15px;
bottom: 15px;
font-size: 12px;
}
.asyncGallery__Item {
width: 100%;
}
.asyncGallery__ItemImage img {
max-height: none;
max-width: 100%;
}
.asyncGallery__ItemDescription {
padding: 0 20px;
}
.asyncGallery__Next,
.asyncGallery__Prev {
display: none;
}
.gallery {
display: inline-flex;
}
.gallery div {
max-width: 90%;
margin: 10px auto;
}
.gallery div img {
max-width: 100%;
margin: 0 auto;
}
}
/* ================================================================================= *
* * * * * * * * * * * * * * * * * * MEDIA QUERIES * * * * * * * * * * * * * * * * * *
=================================================================================== */
#media screen and (min-width: 768px) {
.tabs input:checked + label {
top: -2px;
}
}
#media screen and (max-width: 767px) {
.tabs label {
font-size: 14px;
line-height: 50px;
height: 50px;
display: flex;
width: 100%;
}
.tabs input {
display: flex;
flex-direction: column;
position: absolute;
z-index: -999;
}
.tabs {
width: 100%;
margin-top: 0;
}
.tabs input#tab-2 {
left: 0;
display: flex;
}
.tabs input#tab-3 {
left: 0;
display: flex;
}
.tabs input#tab-4 {
left: 0;
display: flex;
}
.tabs input#tab-5 {
left: 0;
display: flex;
}
.tabs input#tab-6 {
left: 0;
display: flex;
}
.tabs input#tab-7 {
left: 0;
display: flex;
}
.content {
top: 0;
}
.tab-img-lg {
margin: 20px auto;
}
.tabs .tab-selector-1:checked~.content .content-1,
.tabs .tab-selector-2:checked~.content .content-2,
.tabs .tab-selector-3:checked~.content .content-3,
.tabs .tab-selector-4:checked~.content .content-4,
.tabs .tab-selector-5:checked~.content .content-5,
.tabs .tab-selector-6:checked~.content .content-6,
.tabs .tab-selector-7:checked~.content .content-7,
.tabs .tab-selector-8:checked~.content .content-8 {
padding: 40px 15px;
}
.tab-img-container-col {
width: 100% !important;
}
}
#media screen and (min-width: 1000px) and (max-width: 1599px) {
.arrow-container {
top: 70vh;
}
.gallery div {
max-width: ~"calc(25% - 10px)";
margin: 0 5px 0 5px;
}
.tab-img-sm {
margin: 10px auto;
width: 46.1% !important;
max-width: 46.1% !important;
}
}
#media screen and (max-width: 1200px) {
.tabs-h2 {
margin-top: 20px;
}
.tab-img-sm {
width: 46% !important;
}
p {
font-size: 17px !important;
line-height: 1.9em;
}
h2 {
font-size: 22px !important;
}
.content div p {
font-size: 14px !important;
}
}
#media screen and (min-width: 1001px) and (max-width: 1200px) {
.tabs label {
font-size: 12px;
}
}
#media screen and (max-width: 1000px) {
.tabs label {
font-size: 10px;
}
}
#media screen and (max-width: 766px) {
.arrow-container {
display: none;
}
.tabs p{
line-height: 1.7em;
}
.panel {
padding: 8%;
}
.tab-img-sm {
width: 97% !important;
max-width: 97% !important;
display: flex;
}
.tab-img-vert {
margin: 10px auto;
width: 100% !important;
max-width: 100% !important;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1023px) and (min-device-width: 767px) {
.arrow-container {
display: none;
}
.gallery div {
max-width: 30%;
margin: 5px 10px;
}
label {
padding: .9% 2.3%;
}
.panel {
padding: 6%;
}
.tabs h3 {
font-size: 14px;
}
.tabs p{
line-height: 1.5em;
}
.tabs input {
position: absolute;
height: 45px;
left: 0;
top: 10px;
}
.tabs {
width: 100%;
}
.tabs label {
font-size: 13px;
padding: 0 10px;
}
.tabs input#tab-2 {
left: 14.3%;
}
.tabs input#tab-3 {
left: 28.7%;
}
.tabs input#tab-4 {
left: 43%;
}
.tabs input#tab-5 {
left: 57.2%;
}
.tabs input#tab-6 {
left: 71.3%;
}
.tabs input#tab-7 {
left: 85.8%;
}
.tab-img-sm {
width: 48% !important;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1330px) and (min-device-width: 1024px) {
.arrow-container {
display: none;
}
.tabs h3 {
font-size: 15px;
}
.tabs p{
line-height: 1.7em;
}
.panels {
min-height: 755px;
}
.gallery div {
max-width: 31%;
margin: 5px 10px;
}
label {
padding: .9% 2.3%;
}
.panel {
padding: 6%;
}
.tabs input {
position: absolute;
}
.tabs {
width: 100%;
}
.tabs label {
font-size: 13px;
padding: 0 10px;
}
.tabs input#tab-2 {
left: 14.3%;
}
.tabs input#tab-3 {
left: 28.7%;
}
.tabs input#tab-4 {
left: 43%;
}
.tabs input#tab-5 {
left: 57.2%;
}
.tabs input#tab-6 {
left: 71.3%;
}
.tabs input#tab-7 {
left: 85.8%;
}
.tabs input {
top: 10px;
}
}
<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">Overview</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">Design</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3"/>
<label for="tab-3" class="tab-label-3">Build</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4"/>
<label for="tab-4" class="tab-label-4">Interior</label>
<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5"/>
<label for="tab-5" class="tab-label-5">Options</label>
<input id="tab-6" type="radio" name="radio-set" class="tab-selector-6"/>
<label for="tab-6" class="tab-label-6">Specs</label>
<input id="tab-7" type="radio" name="radio-set" class="tab-selector-7"/>
<label for="tab-7" class="tab-label-7">Hybrid Wing</label>
<input id="tab-8" type="radio" name="radio-set" class="tab-selector-8"/>
<label for="tab-8" class="tab-label-8">Gallery</label>
<div class="content">
<div class="content-1">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/tab-images/overview-lg-img3.jpg">
<h2 class="h2-tabs" style="margin-top: 3rem;">BORN TO PLAY - BUILT TO RACE</h2>
<p>It started with the simple vision of delivering the technology and performance of a competitive racing boat to the recreational sailor. The Eagle Class 53 was designed for cruising and racing in a range of
conditions. Constructed of all-carbon and honeycomb core, this yacht is capable of safely reaching between 25-35 knots in light wind.</p>
<p style="margin-bottom: 3rem; margin-top: 10px;">Whether you are looking for a dose of adrenaline racing around the blue waters of the Caribbean or an afternoon of ZEN sitting back in comfort in the open-air saloon, the Eagle Class 53 will take you there.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-1.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-3.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/tab-images/eagle-class-overview-image-2.jpg">
</div>
<div class="content-2">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-top-updated.jpg">
<h2 style="margin-top: 3rem;">Form and Function Perfectly Balanced</h2>
<p>Maintaining optimal performance</p>
<p>The sweep of the sheer</p>
<p style="margin: 10px 0">
Key focus was placed on weight</p>
<p style="margin-bottom: 3rem;">Bringing the Eagle Class series from design to the water is a <a class ="tabs-link" href="https://www.fastforwardcomposites.com/international-design-team-of-naval-architects-engineers-and-foil-experts">team</a> of international talent
with decades of experience in design, naval architecture, composite boatbuilding, and foil engineering. This
mosaic of talent has designed world-class racing boats for Oracle Racing, Luna Rossa, and Artemis Racing.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
<img class="img-below-content-tabs" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-1.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-2.jpg">
<img class="img-below-content-tabs-mobile" src="http://www.lancewalker.life/images/design/eagle-class-design-image-bottom-3.jpg">
</div>
<div class="content-3">
<img class="img-main-tabs" src="http://www.lancewalker.life/images/build/eagle-class-build-image-top.jpg">
<h2 style="margin-top: 3rem;">Experience, Process, Quality</h2>
<p>A highly-capable, world class catamaran – realized by an experienced, dedicated team.</p>
<ul>
<li>Designed by the celebrated naval architect Paul Bieker, veteran designer of multiple America’s Cup projects</li>
<li>Built by Fast Forward Composites, in Bristol, Rhode Island, by a crew of accomplished boatbuilders and seasoned composite specialists</li>
<li>Aerospace derived materials</li>
<h2 style="margin-top: 30px;">Construction</h2>
<li>Vacuum-bagged epoxy pre-preg carbon fiber skins over honeycomb and various core foams</li>
<li>All carbon spars and rig</li>
<li>High modulus carbon fiber rotating Hybrid Wing</li>
<li>Pre-preg carbon C-Foils and T-rudders</li>
<li>Assembled in our newly renovated, state-of-the art production facility. Using our strong supplier relationships, we are able to secure the best resins, adhesives and aerospace grade honeycomb core ensuring the highest quality build.</li>
</ul>
</div>
<div class="content-4">
<img class="img-main-tabs" src="https://www.lancewalker.life/images/interior/interior-main-img.jpg">
<h2 class="tabs-h2" style="margin-top: 3rem;">Open air sophistication</h2>
<p style="margin: 0 0 10px 0;">The Eagle Class 53 is unique in that it combines very lightweight structures with vast space on deck and great accommodations inside. Sail control lines are in the hardtop and are operated from the
forward part of the deck, allowing a line-free area for guests. All the systems are contained in the same area, creating an ideal weight concentration and a clean interior.</p>
<p style="margin: 0 0 10px 0;">The spacious and airy cabins in each hull have a full 6'5" of headroom. The five windows combined with a large hatch above each bunk provide ocean views, fantastic natural light, and ventilation.
Each cabin includes a Barcelona-style chair for lounging, a generous closet, and a full-length double bed at 6'8". The wet room/heads have enough room for two people, with specialized features such as a
custom carbon sink and lightweight Techma head. All interior components are ergonomically designed using modern and lightweight materials.</p>
<p style="margin-bottom: 3rem;">The main saloon features a central entertainment island. The bar contains a sink, refrigerator and additional storage and can be customized to include an ice-maker and microwave.
The island is flanked by bar stools and two luxurious leather settees.</p>
<div class="img-tabs-container">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
<img class="img-below-content-tabs-vert" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
</div>
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-1-vert.jpg">
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-2-vert.jpg">
<img class="img-below-content-tabs-mobile" src="https://www.lancewalker.life/images/interior/interior-3-vert.jpg">
</div>
<div class="content-5">
<img class="img-main-tabs" src="https://www.lancewalker.life/images/options/eagle-class-options-img-main.jpg">
<h2 style="margin-top: 3rem;">Options</h2>
<p style="margin-bottom: 3rem;">Owners have the choice of a variety of performance options, including the option of a standard rig or Hybrid Wing. The Eagle Class 53T is a turbo-charged version of the Eagle Class 53.
Standard C-foils are replaced with carbon fiber T-foils creating a platform which foils at very low wind speeds and significantly increases the speed potential of the boat in medium to
heavy wind conditions. The 53T also comes equipped with our fully automated foiling control system. The possibilities are endless.
</p>
</div>
<div class="content-6">
<div class="tab-img-container" style="margin-top: 0 !important; background: none !important;">
<div class="tab-img-container-col" style="background: none !important;">
<h2>SPECS</h2>
</div>
<div class="tab-img-container-col" style="background: none !important;">
</div>
</div>
</div>
<div class="content-7">
<!--<div class="tab-img-container">
<img class="tab-img-sm" src="https://www.lancewalker.life/images/hybridwing/hw-brand-logo.jpg">
</div>-->
<h2>Hybrid-Wing</h2>
<p> </p><br>
<div style="padding:56.25% 0 0 0;position:relative; opacity: 1; width: 100%; height: 100%;">
<iframe src="https://player.vimeo.com/video/352449872?byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
<div class="content-8">
<div class="ec-container" id="project-ec">
</div>
</div>
</section>
Try experimenting with percent instead of PX or a combination and position:absolute. Apply margins using percent etc. Might have to re-arrange things slightly but might work. Combinations also include using left and margin-left, for example, positive and negative.
Related
I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">
Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
#media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
#media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="navbar">
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
Home
Dispatch
Account
Report
Control
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">
Think this line is incorrect:
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be:
nav_items.style.visibility === "hidden"
so this may work:
nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");
Try the css property for media-query: display:none !important;
I have a button id="getstarted" located near the top and the bottom of my HTML. The button near the top works, but the one near the bottom does not work. They are formatted exactly the same. I want both buttons to work.
Here is my code.
**edited code. I added onclick="window.location.href = 'getstarted.html';" to my buttons. now the first button works, but the second one does not work. how do I get the second button to work?
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#pricing').css("color", "#000");
} else {
$('#pricing').css("color", "#FFF");
}
});
});
// slideshow
$(document).ready(function() {
$("#laptopslideshop > div:gt(0)").hide();
setInterval(function() {
$('#laptopslideshop > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#laptopslideshop');
}, 3000);
});
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#header {
position: fixed;
top: 0px;
width: 100%;
height: 84px;
background-color: #FFFFFF;
color: #000;
z-index: 1;
display: none;
}
#media (max-width: 768px) {
#header {
height: 60px;
}
}
#main {
height: 100vh;
width: 100%;
background: url(Images/teamchat.jpg) no-repeat center;
background-size: contain;
background-size: cover;
}
.headerContents {
text-align: right;
height: 100%;
width: 100%;
float: right;
z-index: 2;
position: fixed;
}
.headerpandc {
margin-right: 18%;
margin-top: 17px;
position: relative;
}
#media (max-width: 768px) {
.headerpandc {
margin-right: 4%;
margin-top: 14px;
}
}
#pricing {
font-family: Nunito Sans;
margin-right: 55px;
font-weight: 800;
letter-spacing: 0.1em;
font-size: 18px;
text-decoration: none;
color: #FFF;
transition: 0.6s;
}
#media (max-width: 768px) {
#pricing {
font-size: 12px;
margin-right: 3%;
}
}
#media (max-width: 355px) {
#pricing {
display: none;
}
}
#pricing:hover {
text-decoration: underline;
}
#pricing:active {
color: #000;
}
#getstarted {
font-family: Nunito Sans;
background-color: #5a52ff;
border-radius: 10px;
border: none;
color: white;
padding: 11px 25px;
text-align: center;
font-size: 18px;
transition: 0.3s;
text-decoration: none;
cursor: pointer;
font-weight: 800;
letter-spacing: 0.05em;
outline: none;
}
#media (max-width: 768px) {
#getstarted {
padding: 8px 15px;
font-size: 12px;
}
}
#getstarted:hover {
background-color: #3d33ff;
}
#getstarted:active {
transform: translateY(2px);
box-shadow: 0 1px #666;
}
#telosdesignlogo {
float: left;
height: 30px;
margin-left: 18%;
margin-top: 6px;
}
#media (max-width: 768px) {
#telosdesignlogo {
margin-left: 4%;
height: 23px;
}
}
/*main text*/
#mainbox {
height: 470px;
width: 500px;
text-align: left;
position: relative;
top: 250px;
left: 28%;
font-family: Nunito Sans;
color: #FFF;
}
#hitelos {
font-size: 2.5em;
font-weight: lighter;
}
#maintext {
font-weight: 800;
font-size: 3.5em;
}
#mainpricing {
z-index: 5;
}
/* Laptop slideshow begins */
#laptopslideshop {
position: relative;
margin-top: 50px;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.mySlides {
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="header"></div>
<div class="headerContents">
<div class="headerpandc">
<a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
<img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" />
</div>
</div>
<div id="main">
<div id="mainbox">
<div id="hitelos">
Hi! We're Telos.
</div>
<div id="maintext">
Beautiful websites tailored to your unique business.
</div>
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
</div>
</div>
<div id="laptopslideshop">
<div>
<img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" />
</div>
<div>
<img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" />
</div>
</div>
id should be unique to an element(just one), use a class instead
In your code you use javascript(jquery) to control href, not html, see onclick.
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">
The javascript is taking in consideration only the first element because no other element with the same id should exist.
--
I see that you have also:
<script type="text/javascript" src="app.js"></script>
What this code is doing ?
Check the web browser console for JavaScript errors from other sources/code.
Try with this code
<a id="pricing" href="http://google.com">Pricing</a>
<button id="getstarted">Get Started</button>
<a href="index.html">
<img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>
I'm trying to style the ellipsis (...) of a 3 line piece of text that, when clicked on, reveals the full amount of text using jQuery. Currently I've been able to create a multi-line ellipsis on 3 lines for webkit browsers, but it isn't compatible with all browsers like IE & Firefox but works on Chrome & Edge.
With the influence of this post, I can only style the ellipsis when on one line but not 3 lines of text, making sure it overrules the other CSS.
Does anyone know how to apply this styling but to an ellipsis on the 3rd line? My attempted code is below:
$('.flex-text.description').click(function() {
if ($(this).css('-webkit-line-clamp') == '3') {
$(this).css('-webkit-line-clamp', 'initial');
} else {
$(this).css('-webkit-line-clamp', '3');
}
});
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 2%
}
.flex-item:nth-of-type(n+5) {
margin-top: 2%
}
.flex-item-image-link {
width: 100%
}
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item,
.flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
position: relative;
font-family: arial;
/* perhaps remove */
justify-content: flex-start;
}
.flex-text-content {
padding: 10px;
width: 100%;
}
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a {
color: #000
}
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
overflow: hidden;
width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/* Other ellipsis method: */
/* max-height: 6em; */
/* limits to 3 lines of text */
/* ellipsis below: */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* max-width: 650px; */
/* solves the flex white-space nowrap width pushout problem */
/* Limit to 3 lines, then ellipsis */
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover {
opacity: 0.7
}
.flex-item ul {
text-align: left
}
#media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 3%
}
.flex-item {
width: 48.5%
}
.flex-item:not(:nth-of-type(even)) {
margin-left: 0
}
.flex-item:nth-of-type(n+3) {
margin-top: 3%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
<div class="flex-text-content">
<h2 class="flex-text header">Pine Cone</h2>
<span class="flex-text price">$81.52</span>
<span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway and some more text to just go here anyway and some more text to just go here anyway.</span>
</div>
<button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
</div>
</div>
I've made a codepen demo to demonstrate this: https://codepen.io/anon/pen/wRObXd
So, I have tried everything I can think of to get rid of the white margins around everything on my page.
I have put: margin: 0; on everything I can think of and it still does not get rid of it. Any help would be great!
I apologize for the giant wall of code.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* global */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Tahoma", sans-serif;
font-size: 16px;
color: #454545;
background-color: #fff;
}
div {
margin: 0;
}
/* end global */
/* custom */
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.footer {
padding: 5px 10px;
background-color: #428cd9;
}
/* end custom */
/* custom responsive */
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/*end custom responsive */
/* navbar */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428cd9;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
height: 55px;
display: inline-block;
color: #454545;
padding: 0px 16px;
line-height: 3.0;
text-decoration: none;
text-align: center;
font-size: 17px;
transition: 0.3s;
}
ul.topnav li a:hover {
background-color: #2162a6;
color: #757575;
}
ul.topnav li.icon {
display: none;
}
/* end navbar */
/* responsive navbar */
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* end responsive navbar */
#media screen and (max-width:680px) {
.nomobile {
display: none;
}
.yesmobile {
width: 100%;
}
}
.header-img {
min-height: 300px;
background-image: url(http://thirdshiftdesigns.net/images/cabheader2.png);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
/*padding: 40px; (If don't want to set min-height or some image content is there) */
}
.end-header {
width: 100%;
height: 15px;
background-color: #428cd9;
}
<body>
<div class="col-12">
<ul class="topnav" id="myTopnav">
<li>Logo</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
☰</li>
</ul>
<div class="row">
<div class="col-12">
<div class="header-img">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="end-header">
</div>
</div>
</div>
</div>
<!-- end header -->
<!-- footer -->
<div class="col-12">
</div>
</body>
If you inspect the element, you can find that the unwanted space is because of the following style which applies padding to all elements with the class value containing col-.
[class*="col-"] {
float: left;
padding: 15px;
}
Override the style and you can get rid of the unwanted space. Note that this will set the padding to 0 for all the classes whose value contains col-.
[class*="col-"] {
padding: 0;
}
Or you can only override the padding of .col-12 which will apply padding of 0 to .col-12 while the other classes containing col- will still get a padding of 15px.
.col-12 {
padding: 0;
}
You're wrapping many elements in a .col-12 class. All .col- elements are set in your CSS to contain 15px of padding around the edges. Here's a screenshot from inspecting the page in Chrome Developer Tools where you can see the element highlighted:
You need to set padding to 0 on the col-12 element.
change the following in your CSS
.col-12 {
width: 100%;
}
to
.col-12 {
width: 100%;
padding: 0px;
}
fiddle example here
Hi guys i am using this codepen as an example on mysite. My question is, on the fifth panel is possible to make the drop down box when u click on it a different color?
Html:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'>
<div class="patch-container">
<div class="patch-item patch-button" data-patch-panel="1">One</div>
<div class="patch-panel" data-patch-panel="1">One</div>
<div class="patch-item patch-button" data-patch-panel="2">Two</div>
<div class="patch-panel" data-patch-panel="2">Two</div>
<div class="patch-item patch-button" data-patch-panel="3">Three</div>
<div class="patch-panel" data-patch-panel="3">Three</div>
<div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div>
<div class="patch-panel" data-patch-panel="4">Four</div>
<div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div>
<div class="patch-panel" data-patch-panel="5">Five</div>
</div>
CSS:
*,
*:before,
*:after {
box-sizing: border-box;
-webkit-appearance: none;
}
body {
height: 100%;
background-color: #22313F;
font-family: 'Open Sans';
-webkit-font-smoothing: subpixel-antialiased;
}
/********************************
Plugin Hero Example
********************************/
.patch-button {
color: #FFF;
cursor: pointer;
font-size: 1em;
font-size: 1.5em;
letter-spacing: 0;
line-height: 150px;
}
.patch-button:hover {
border: solid 3px #FFF;
line-height: 144px;
}
.patch-container {
background-color: #2C3E50;
border-radius: 5px;
color: #FFF;
margin: 4%;
overflow: auto;
padding: 2%;
position: relative;
text-align: center;
zoom: 1;
max-width: 1000px;
}
.patch-item {
background-color: #FFF;
border-radius: 4px;
float: left;
height: 150px;
margin: 0 0 2% 0;
width: 100%;
}
.patch-panel {
background-color: #FFF;
border-radius: 4px;
color: #FFF;
display: none;
float: left;
font-size: 1.5em;
height: 250px;
line-height: 250px;
margin: 0 0 2% 0;
width: 100%;
}
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
[data-patch-panel='2'],
[data-patch-panel='6'],
[data-patch-panel='9'] {
background: #00B16A;
}
[data-patch-panel='3'],
[data-patch-panel='7'],
[data-patch-panel='10'] {
background: #E74C3C;
}
[data-patch-panel='4'],
[data-patch-panel='8'],
[data-patch-panel='12'] {
background: #3498DB;
}
/********************************
Media Queries
********************************/
#media only screen and (min-width: 550px) {
h2 {
font-size: 3.3rem;
}
.patch-item {
margin: 1%;
width: 48%;
}
.patch-panel {
margin: 1%;
width: 98%;
}
.components {
margin: 1.5%;
width: 46%;
}
}
#media only screen and (min-width: 992px) {
.patch-container {
margin: 4% auto;
}
.patch-item {
margin: 0.6667%;
margin: calc(4% / 6);
width: 32%;
}
.patch-panel {
margin: 0.6667%;
margin: calc(4% / 6);
width: 98.6666%;
width: calc(100% - (4% / 6) * 2);
}
.resize {
margin: 50px auto -2%;
}
.wide {
margin: 0.6667%;
margin: calc(4% / 6);
width: 48.6666%;
width: calc(50% - (4% / 6) * 2);
}
.thin {
width: 23.6666%;
width: calc(25% - (4% / 6) * 2);
}
}
So just to explain again, everything works fine. But what i want to happen is on the panel 5. The box it self is fine, but when you click on it, i would like it not to be orange but a different color on the new box which appears. So for the new box to appear, i would like it white with a black border, but i am not sure how
[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
background: #F5AB35;
}
Tried playing with this part, but this affects both boxes.
Thanks for the help
You want to give the panel another class, id or attribute to identify it apart from the panel above it. Something like this:
<div class="patch-panel panel-five" data-patch-panel="5">Five</div>
and then add
.panel-five {
background-color: #FFFFFF;
}
to your CSS