Objects in HTML - html

I am currently redesigning a site using svg. However I have run into several issues that I have yet to solve. This is a three part question.
How do you make an object which is an svg file dynamically change to fit on screen that are smaller than the viewbox without the file getting cropped. The svg file in this case is diagonal arrow.
How do you keep text in the same location based on this dynamically changing image, so that the arrow always points to the text no matter the screen size, without using vague #media queries throughout the css file (eg. min-width:15 to max-width:40...). Example of the arrow with the apple
When using objects in html, how do I replace an object with another object based on screen size. For example I have an svg of an apple above the arrow and when the screen resolution hits 1000px it shows this arrow and when its below it shows a flipped version of this arrow. It would have been easy using srcset with img, but because I have the to change color of the arrows using svg styling I can't use img.
Thank you for all your help.
Dropbox file of website
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://orgrune.com/style.css">
</head>
<body>
<div class="container">
<header class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12 text-uppercase">
<h1>Home</h1>
<hr class="hr-cl">
</header>
<div class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12">
<div class="svg-container">
<object type="image/svg+xml" data="http://orgrune.com/Untitled-3.svg" class="svg-content "></object>
</div>
</svg>
<a class="photography text-uppercase" href="\" alt="photography">photography</a>
</div>
</div>
</body>
</html>

Related

Bootstrapemail Gmail-mobile-webapp does not support `display: none`

I use bootstrapemail to make my e-mails. But with I have problems with Gmail Mobile Webmail.
The user-icon must not be shown on mobile devices. But here it is shown in the logo in the header.
It doesn't respond to: display: none;. Also it ignores the col-lg classes of bootstrap-email when the header becomes to small. Can eneyone help me?
This is my code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
In the image below tou can see what it looks like now.
Display:none is not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmail
It also doesn't support <style> blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on #media queries in the <style> block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).
You could try adding your own styles like style="width:0;height:0;" (inline on the image) and then adding a custom embedded style to show it in desktops like <style>#media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the <style> block, and you'll have to do something about Outlook, but you can use their conditional block for that)

Bootstrap - Align 2 divs vertically on responsive mode

I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled

Why is Microsoft Edge underlining this span and treating it like a link? [duplicate]

This question already has answers here:
Remove Microsoft Edge's phone number styling
(4 answers)
Closed 3 years ago.
I have a relatively simple bit of markup on the header of a website I'm redesigning and it seems to display fine on browers I've tried but a rather odd thing happens in Edge (on Windows 10): the phone number in the header shows up underlined, as if it is a link, and when I click on it, it asks if I want to open Zoom. I know Zoom is a videoconferencing app but I don't even have it on my laptop where I am displaying this website so I'm not sure why it wants to offer to take me into Zoom. I just want to display a phone number and make it stand out a bit by colouring it differently than the surrounding text!
Here is a JSFiddle that shows my HTML and CSS (inline). And here's the code from the JSFiddle:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#phoneno {
color: aqua
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="page-content">
<div id="header">
<div class="row">
<div class="col-sm" id="Jones Chiropractic">JONES CHIROPRACTIC</div>
<div class="col-sm text-right" id="Doctor">Dr. Fred Jones</div>
<div class="col-sm ml-auto text-right" id="JonesContact">
123 Main St. W.<br> St. Louis, MO<br> Phone <span id="phoneno">(555) 555-5555</span><br> Fax (555) 555-5556 <br> joneschiropractic#gmail.com
</div>
</div>
<!-- row -->
</div>
<!-- header -->
</div>
</div>
</body>
</html>
Why does Edge underline the (first) phone number (but not the fax number) and why does it want to open Zoom? How do I make it just display it without the underline and persuade the browser not try to launch Zoom?
You should be able to override this if you put the following in the head section for your page:
<meta name="format-detection" content="telephone=no">
This page has more information on this.

Pure CSS 3 image slider with autoplay and overlay text

So I'm trying to make a pure CSS3 autoplaying image slider on a web page project I'm doing. So the HTML of the page looks like this:
https://pastebin.com/c0ZiyHGd
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Joelson Querub</title>
</head>
<body>
<header>
<nav>
Portfolio
Sobre
Loja
</nav>
</header>
<main>
<div id="pinto">
<h1>Joelson Querub</h1>
<div id="images">
<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71d59cd22de21da8d2939bc203617983&auto=format&fit=crop&w=1560&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e79d1986f31127432328ba0b78f0b510&auto=format&fit=crop&w=375&q=80"
alt="Pug Fofoso">
<img src="https://images.unsplash.com/photo-1529088363398-8efc64a0eb95?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=179403fa836a063432aec8ccc04ee248&auto=format&fit=crop&w=424&q=80"
alt="Pug Fofoso">
</div>
</div>
</main>
</body>
</html>
So what I want is to only one pug image appear at a time, and to make them automatically slide leftwards. The size is important, and the current size is the one I want. Also, notice that there is a text overlaying the image. That text must stay there. I would like to do a smooth slide that is infinite, but that doesn't do that subtle return to the first image.
I tried my luck with some CSS but it din't go very far. You guys can take a look:
https://pastebin.com/S2UZ4uK2
Or for an easier way to see it all:
https://codepen.io/anon/pen/OwWgoX
Though CodePen messes up with the text positioning.
You can use wowslider. Wowslider . Just download the software. You can easily add any picture and also any kind of sliding transformation.

Responsiveness of Bootstrap page [duplicate]

This question already has answers here:
Responsive website zoomed out to full width on mobile
(4 answers)
Closed 4 years ago.
Can you say why do this code is not adapt to different mobile devices? I am HTML beginner and can not figure it out. I'm using Bootstrap 4 framework.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="xxxxx.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
<title>xxxxx</title>
</head>
<body>
<div class = "container">
<hr class = "spec-hr">
<div class = "row justify-content-md-center">
<div class = "col-md-6 text-left name">
xxxxxx
</div>
<hr class = "spec-hr">
</div>
<div class="row justify-content-md-center intro">
<div class="col-md-3 text-center">
Photo
</div>
<div class="col-md-3 text-center">
Kontakt<br>
<p class = "email">xxxxx#gmail.com<br>
mobile: xxxx<br>
facebook: xxxxx</p>
</div>
</div>
<hr class = "spec-hr">
<!--Motto-->
<div class="row justify-content-md-center motto">
<div class="col-md-6 text-center">
<p class="motto">Every day is a chance to get better<br></p>
<p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
</div>
</div>
<hr class = "spec-hr">
</div>
</body>
</html>
You use classes such as col-md-6 and col-md-3, these are for medium sized screens., for mobiles, you need classes such as col-6 and col-3. See here for examples and definitions
"Can you say why do this code is not adapt to different mobile
devices?"
The meta tag is wrong. It should be:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The page will never be responsive without the correct meta tag. Please read the documentation...
"To ensure proper rendering and touch zooming for all devices, add the
responsive viewport meta tag to your <head>."
Also see:
Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile
For design to be responsive for mobile devices, use bootstrap classes like col-xs-3, col-xs-6. "col-xs-*" is used to target mobile devices having width greater than 230 and less than 768. Also use #media screen {} to target specific style to specific width mobile device.