I am trying to make an image respond to the browser size, so that when the browser is smaller, the image responds so that there is no scrolling involved. I found a similar question here How can I resize an image dynamically with CSS as the browser width/height changes?, but I'm not able to make that solution work. What am I missing?
I'm including my code below - I am using Wordpress, so it puts a "p" tag around my image automatically, wrapping my image in a paragraph. Also, I'm not sure if I'm including too much code for this purpose, but I wanted to make sure it was all there in case there's an error in a strange place that could be causing the problem...
Here is my html:
<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>
Here's my CSS:
body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}
#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
.content_well_pop {
left: 0;
width: 100%;
}
.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}
p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}
.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}
Thanks
this css rule here:
.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}
You are specifiying a width on the parent container of the image. Change it to max-width instead of width.
Here is an javascrpt-free, crossbrowser-stable solution you are looking for. I have implemented it in past on that website: http://www.gardinenhaus-morgen.de/.
HTML:
<html>
<body>
<div id="page-wrapper">
<div id="inner-wrapper">
<!-- your content here -->
</div>
</div>
<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="background" src="<bild>" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#bg div
{
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
#bg td
{
vertical-align: middle;
text-align: center;
}
#page-wrapper
{
position: absolute;
top: 0;
left: 0;
z-index: 70;
overflow: auto;
width: 100%;
height: 100%;
}
#inner-wrapper
{
margin: 30px auto;
width: 1000px;
}
Related
been struggling for some time now.
I'm trying to give my welcome-section the same size as the viewport, but I just can't seem to get it done, whatever I do...
Then also, the bottom is hidden under the safari menu when I check the mobile version. I used the same formula as I used before on another project, but it doesn't work here.
Can somebody clarify, please?
Many thanks in advance!
body {
background: linear-gradient(to top right, grey, black);
height: 100%;
}
#navbar {
position: fixed;
width: 100%;
display: block-inline;
top: 0;
left: 0;
background: #db0b15;
}
.navbar {
text-align: right;
margin-right: 10px;
}
.navbar-item {
display: inline;
padding-left: 30px;
color: white;
font-size: 20px;
text-decoration: none;
text-align: center;
}
welcome-section {
height: 100%;
width: 100%;
}
a {
color: white;
text-decoration: ;
text-align: center;
}
h1 {
padding-top: 150px;
text-align: center;
color: white;
}
p {
color: white;
text-align: center;
}
.subheader {
font-size: 30px;
text-decoration: underline;
padding-top: 50px;
padding-bottom: 20px;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 150px 150px;
grid-column-gap: 70px;
grid-row-gap: 50px;
justify-content: center;
align-content: center;
}
.project-img {
height: 120%;
width: 120%;
}
.icon {
padding-right: 20px;
padding-left: 20px;
}
.profile-link: {
color: blue;
}
#welcome-section {
height: 100vh;
}
#media only screen and (max-width: 600px) {
.project-img {
max-width: 100%;
max-height: 100%;
}
.project-list {
text-align: center;
display: grid;
grid-template-columns: 160px 160px;
grid-template-rows: 120px 120px;
grid-column-gap: 5px;
grid-row-gap: 5px;
justify-content: center;
align-content: center;
margin-right: 10px;
}
#media screen and (max-width: 768px) {
_::-webkit-full-page-media,
_:future,
:root .safari_only {
padding-bottom: 170px; //resize
}
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1c24d3937a.js" crossorigin="anonymous"></script>
<title id="title">Personal Portfolio - Iwan Van den Broeck</title>
</head>
<body id="body">
<navbar id="navbar">
<ul class="navbar">
<li class="navbar-item">Welcome</li>
<li class="navbar-item">Projects</li>
<li class="navbar-item">Contact</li>
</ul>
</navbar>
<welcome-section id="welcome-section" class="welcome-section">
<h1>Welcome to my Portfolio.<br><br>I am Iwan<br><br> and I'm a Web Developer<br><br></h1>
</welcome-section>
<projects-section id="projects">
<p class="subheader">These are some of my projects:</p>
<project-list class="project-list">
<a id="tribute-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/YzZoXvY" target="blank" alt="link to Steve Jobs tribute page"><img src="https://drive.google.com/thumbnail?id=1pTGPtU4oKYReRbMnAPkeC1ll-Nor0dSo" alt="screenshot of tribute page" class="project-img"></a>
<a id="survey-form" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/mdWZNPd" target="blank" alt="link to AirAsia customer satisfaction survey"><img src="https://drive.google.com/thumbnail?id=1Sclylussw2JNXSSlD3qs7xABHVKx_0LV" alt="screenshot of survey form" class="project-img"></a>
<a id="product-landing-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/NWjKdre" target="blank" alt="link to Apple landing page"><img src="https://drive.google.com/thumbnail?id=1RY4MuLY8knZk6pogcMwApjJ-fYOtTUCu" alt="screenshot of landing page" class="project-img"></a>
<a id="technical-documentation-page" class="project-tile center" href="https://codepen.io/iwan-van-den-broeck/full/BaRaRWp" target="blank" alt="link to JS technical documentation page"><img src="https://drive.google.com/thumbnail?id=1Pxp17-rmWZqD0or3lmF2UvtPbKuCyC6l" alt="screenshot of technical documentation page" class="project-img"></a>
</project-list>
</projects-section>
<contact-section id="contact">
<p class="subheader">Contact me:</p>
<p>Let's do some projects together! Contact me for more information.</p>
<p id="contact-links">
<p>
<i class="fas fa-phone-square-alt icon"> Call me</i>
<i class="fas fa-envelope-square icon"> Email me</i>
<i class="fab fa-linkedin icon"> Linkedin</i>
</p>
<p>Click here to visit my Profile
</p>
</contact-section>
</body>
</html>
You could set your section to height: 100vh; to make it the full height of your viewport.
In combination with display: block; it will work.
welcome-section {
height: 100vh;
width: 100%;
display: block;
}
In the following image which is my implementation, I have two sets of photos, the first group is uploading ones, and the second groups are the uploaded ones.
In reality, right after the last uploading image, the second group should start.
I started style with available photos, later adding uploading images stamp was added, and codes are becoming spaghetti.
I looking for a way to make the asked scenario. Any idea?
My simplified HTML codes is (beside the html comments, I put some comments with ** here for explanation)
<div class="gallery-wrapper">
<ng-container *ngFor="let file of progressFiles; let i = index;">
<div class="frame">
<div class="photo-wrapper">
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
</div>
<div class="waiting-frame">
<div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
<div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
</div>
</div>
</ng-container>
<!-- this part read medias -->
<div *ngIf="mediaContent && mediaContent.length">
<!-- draged and dropped medias -->
<div dnd-sortable-container [sortableData]="mediaContent">
<ng-container *ngFor="let media of mediaContent ; let i = index">
<div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
<div class="photo-wrapper">
<img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
</div>
<div class="modifiers hidden-sm hidden-xs">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
<div class="modifiers visible-sm-inline-block visible-xs-inline-block">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2"></div>
<div class="sprite sprite-editor adjust"></div>
<div class="sprite sprite-garbage-bin-black"
(click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
*ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
And here is my SASS codes using flex-box technique.
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-left: -5px;
margin-right: -5px;
.frame {
margin: 10px;
border-radius: 6px;
border: 1px solid $gray;
max-width: 152px;
height: 194px;
overflow: hidden;
position: relative;
cursor: move !important;
display: inline-block;
.photo-wrapper {
width: 100%;
height: 150px;
overflow: hidden;
border-bottom: 1px solid $gray;
display: flex;
align-items: center;
background-color: $gray-light;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 150px;
pointer-events: none;
}
}
.modifiers {
display: inline-block;
position: relative;
padding: 8px 20px;
}
.waiting-frame {
display: inline-block;
text-align: center;
position: absolute;
background-color: $gray-base;
opacity: 0.6;
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 194px;
border-radius: 6px;
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 50px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 247, 0, 0.2);
border-right: 1.1em solid rgba(255, 247, 0, 0.2);
border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
border-left: 1.1em solid $brand-primary;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}
How to add line break in tooltip
I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code
http://codepen.io/apps4any/pen/RWQLyr
Html
<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
<md-content layout-padding="">
<md-button class="md-fab md-fab-top-right right" aria-label="Photos">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<md-tooltip>
List1<br>
List2<br>
List3<br>
List4
</md-tooltip>
</md-button>
<div style="margin-top: 150px;">
</div>
</md-content>
</div>
CSS:
.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
box-shadow: none;
border: none;
transform: none;
-webkit-transform: none; }
.tooltipdemoBasicUsage .left {
top: 70px !important;
left: 56px !important; }
.tooltipdemoBasicUsage .right {
top: 70px !important;
right: 56px !important; }
JS
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.demo = {};
});
Adding this CSS seems to work in your case (with the <br>s):
md-tooltip .md-content {
height: auto;
}
I'm not sure why Angular-Material hard-coded the height to 22px. You'll need to check whether this change breaks other tooltips.
Or you can apply it specifically to this use case only by giving it a class, e.g. tt-multiline, so you can target it in CSS:
md-tooltip.tt-multiline .md-content {
height: auto;
}
Edit: Starting from Angular-Material 1.1, some class names have changed to start with a underscore.
In this case use
md-tooltip ._md-content {
height: auto;
}
and for specific class
md-tooltip.tt-multiline ._md-content {
height: auto;
}
Since angular-material version >1.1.2 you can simply override .md-tooltip class: (JsFiddle)
.md-tooltip {
height: auto;
}
And if you want to style a particular tooltip, add a custom class to md-tooltip element:
(jsFiddle)
HTML
<md-tooltip class="tooltip-multiline">
I'm a multiline <br/> tooltip
</md-tooltip>
CSS
.tooltip-multiline {
height: auto;
}
both cases tested in angular-material 1.1.2, 1.1.3 and 1.1.4 versions
Set the max-with's below to what ever you need. Now it will do automatic line breaks or put a <br/>
into it.
md-tooltip .md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
md-tooltip {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
overflow: visible !important;
white-space: normal !important;
}
md-tooltip ._md-content {
height: auto !important;
max-width: 200px !important;
font-size: 13px !important;
}
You can view the styling for md-tooltip (v0.11.4) here: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css
My own overwrites to the material design styling to allow nice looking multi-line tooltips:
md-tooltip {
font-family: Roboto, 'Helvetica Neue', sans-serif;
.md-background {
border-radius: inherit;
}
.md-content {
height: auto;
width: 400px;
max-width: 400px;
padding: 8px;
white-space: initial;
}
}
#media screen and (min-width: 600px) {
md-tooltip .md-content {
font-size: 14px;
height: auto;
width: 300px;
padding: 8px;
max-width: 300px;
}
}
Or you can use white-space: pre-line; in the custom class of your md tooltip. :)
After a while searching for a solution FROM A VARIABLE CONTENT:
.ts
public matTooltipContent: string = 'Line 1 comment\nLine 2 comment\nLine 3 comment'
.html
<button mat-icon-button aria-hidden="false" class="material-icons-outlined"
[matTooltip]="matTooltipContent"
matTooltipClass="allow-cr"
(click)="onInfoButtonClicked($event)">
<mat-icon >help_outlined</mat-icon>
</button>
.css
.allow-cr {
white-space: pre;
}
See stackblitz example
I am using angular_material 1.1.8, for me single answer didn't work, a combination did.
html
<md-tooltip class="tooltip-multiline">Years ago, when I was backpacking...</md-tooltip>
css
.tooltip-multiline {
height: auto;
white-space: pre-line;
max-width:300px;
line-height: 14px; /*optional*/
font-weight:200;/*optional*/
letter-spacing: 0.5px; /*optional*/
font-size:11px;/*optional*/
}
Hope it helps..
angular material tool tip is warping all content in div so this its working
<md-tooltip class="tooltip-multiline" md-direction="left">
This is tooltip
</md-tooltip>
.tooltip-multiline div{
height: auto;
}
I want click the submenu(coordinates2) in my following code.I have tried such methods using WebElement.But it doesn't work.And menu will be in mouse over funtion.Pls help me out of this issue.
Point coordinates = driver.findElement(By.xpath("html/body/div[3]/div[1]")).getLocation();
Point coordinates1 = driver.findElement(By.xpath("html/body/div[4]/div[1]")).getLocation();
Point coordinates2 = driver.findElement(By.xpath("html/body/div[5]/div[1]")).getLocation();
Robot robot = new Robot();
robot.mouseMove(coordinates.getX()+3,coordinates.getY()+150);
robot.mouseMove(coordinates1.getX()+50,coordinates1.getY()+240);
driver.manage().timeouts().implicitlyWait(0, TimeUnit.SECONDS);
robot.mouseMove(coordinates2.getX()+200,coordinates2.getY()+240);
The below is the Html code.
<body marginwidth="0" marginheight="0" bgcolor="" onload="dyninit();init();" topmargin="0" leftmargin="0">
<div id="transboxdiv" class="transbox">
<iframe id="disablePageframe" scrolling="no" style="z-index: 150;position:absolute;display:none;background-color:#ffffcc;border: 0 solid black; allowtranaparency:true"/>
<div id="disablePage" class="options" border="0" style="z-index:150; font-family:'Microsoft Sans Serif';font-size:13px;display:none;position:absolute;text-align:center;"/>
<div style="position: absolute; visibility: visible; background-color: rgb(255, 255, 255); width: 617px; height: 20px; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: normal; font-style: normal; font-size: 8pt; z-index: 101; top: 64px; left: 0px;">
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 255, 255); background-color: rgb(25, 63, 148); text-align: left; width: 65px; height: 16px; padding-left: 0px; padding-top: 2px; left: 1px; top: 1px;">Masters</div>
</div>
<div style="position: absolute; visibility: visible; background-color: rgb(255, 255, 255); width: 142px; height: 236px; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: normal; font-style: normal; font-size: 8pt; z-index: 102; top: 84px; left: 0px;">
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 255, 255); background-color: rgb(25, 63, 148); text-align: left; width: 140px; height: 16px; padding-left: 0px; padding-top: 2px; left: 1px; top: 1px;">Material Group</div>
</div>
<div style="position: absolute; visibility: visible; background-color: rgb(255, 255, 255); width: 162px; height: 56px; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: normal; font-style: normal; font-size: 8pt; z-index: 103; top: 85.8px; left: 127px;">
<div style="position: absolute; visibility: inherit; overflow: hidden; cursor: default; color: rgb(255, 255, 255); background-color: rgb(25, 63, 148); text-align: left; width: 160px; height: 16px; padding-left: 0px; padding-top: 2px; left: 1px; top: 1px;">Material Group-Add</div>
</div>
Clicking a sub-menu is easy. As soon as you click the menu and the content appears, the page DOM might change and load the menu contents. At that point you should be able to see the elements in the page source and iterate through them as a list using the Selenium getElements(By) method.
I am working with a to client fix a problem on a single page. On all pages, the footer content is positioned and displays properly. However, on this page, when viewed in IE7 the footer content moves up into the body area. The only difference between this page and all the other is the presence of a WooFoo contact form.
I have tried a zillion different ways to bump that content down, but it will not respond to padding or margin adjustments.
Here is the HTML:
<div id="footer">
<div class="width">
<ul class="footerNav">
<li><a class="bFB" href="http://www.facebook.com/pages/Charlotte-NC/The-Idea-People/124178504825" target="_blank" title="The Idea People Charlotte web design facebook">FaceBook</a></li>
<li><a class="bTW" href="http://twitter.com/theideapeople" target="_blank" title="The Idea People Charlotte web design twitter">Twitter</a></li>
<li><a class="bEM" href="http://feedburner.google.com/fb/a/mailverify?uri=theideapeople" target="_blank" title="The Idea People Charlotte web design email">FeedBurner</a></li>
<li><a class="bRSS" href="http://feeds.feedburner.com/theideapeople" target="_blank" title="The Idea People Charlotte web design rss">RSS</a></li>
</ul>
<br class="clear" />
<ul class="termNav">
<li>Terms of Use |</li>
<li>Privacy Policy</li>
</ul>
<p class="copyright">©2010 The Idea People. All Rights Reserved.</p>
<p class="company">Charlotte, NC web design, graphic design and internet marketing</p>
<div id="address"> <strong>The Idea People</strong><br />
4424 Taggart Creek Rd., Suite 111<br />
Charlotte, NC 28208 </div>
<div id="phone"> <strong>T</strong> 704.398.4437<br />
<strong>F</strong> 704.398.4438<br />
<strong>E</strong> ideas#theideapeople.com </div>
<br class="clear"/>
</div>
</div>
Here is the CSS:
#footer { clear: both; background: url(../images/bg_footer.png) 0 0 no-repeat; padding: 10px 0 76px; color: #ccc; font-size: 14px; font-weight: bold; }
#footer .width { position: relative; margin: 0 auto; width: 960px; }
.footerNav { width: 300px; height: 30px; font-size: 15px; position: relative; top: 5px; left: 770px; }
.footerNav li { position:relative; float:left; margin:0; }
.footerNav li a { color: #fff; display: block; text-decoration: none; font-weight: bold; text-indent: -9999px; }
.footerNav li a.bRSS { background: url(../images/icon-rss.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bFB { background: url(../images/icon-facebook.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bTW { background: url(../images/icon-twitter.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
.footerNav li a.bEM { background: url(../images/icon-email.png) 0 0 no-repeat; width: 28px; height: 28px; padding-left: 26px; }
Any help in resolving this will be greatly appreciated!
Thanks.
The .footerNav element is causing overflow and busting the layout. I even get horizontal scrollbars on my machine, on all browsers.
The following CSS seems to fix it:
.footerNav
{
/* Add clear and float
*/
clear: left;
float: right;
font-size: 15px;
height: 30px;
top: 5px;
/* Delete these 3
position: relative;
left: 770px;
width: 300px;
*/
}