So I am building a PWA using the Ionic PWA ToolKit. Now it displays as it should on my mac but I recently tried it on 3 different laptops running windows and everything just seemed zoomed in.
This is how it appears on my mac and should appear:
And this is how it displays on windows (other laptops):
This is my CSS:
/*
* =============================================================================================
* Content Section
* =============================================================================================
*/
app-bus-home {
background: url(../assets/img/banners/bus.jpg) no-repeat bottom/cover;
min-height: 730px;
text-align: left;
color: #ffffff;
}
app-bus-home ion-grid {
max-width: 1200px;
}
app-bus-home ion-text h1 {
margin-top: 90px;
}
app-bus-home h1 {
font-size: 60px;
}
app-bus-home ion-img.bus {
width: 500px;
margin-top: 65px;
}
date-picker {
width: 500px;
margin-top: 25px;
display: none;
position: absolute;
z-index: 2000;
top: 25px;
overflow: hidden;
}
And this is the JSX layout:
render() {
return [
<ion-grid align-items-start>
<ion-row>
<ion-col>
<ion-text color="light">
<h1 class="font-light animated slideInLeft">BUS <strong class="font-black">TICKETS</strong></h1>
<p class="font-light animated slideInLeft">xxxxxx</p>
<p class="font-light animated slideInLeft">xxxxxx</p>
</ion-text>
<ion-img class="bus animated zoomIn" src="../assets/img/bus.png" />
</ion-col>
<ion-col size="4" padding>
<bus-search class="animated slideInRight"></bus-search>
<date-picker availableDates={this.availableDates} actionUrl={this.actionUrl} showHeader={true} showButtons={true} class="animated"></date-picker>
</ion-col>
</ion-row>
</ion-grid>
];
}
Your page isn't responsive, so it means that you can't see it in the same way on different devices. To optimize the visualization on several devices, i suggest you to use '%' instead of 'px' in your css.
In alternative you can use libraries like Bootsrap to do it. Bootstrap offers lot of classes to make your page responsive. Usually I use the following documentation: https://www.w3schools.com/bootstrap4/default.asp .
Related
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
i'm trying to stack those two icon in a ionic icon. I know how to make the custom ionic icon, no problem. I also know about the :before and :after trick to stack icon from this question
For now, i got this css.
.ion-md-notice:before, .ion-ios-notice:before {
font-family: "FontAwesome" !important;
content: '\f133' !important;
bottom: -0.25em;
position: relative;
color: #d81717;
}
.ion-md-notice:after, .ion-ios-notice:after {
font-family: "FontAwesome" !important;
content: '\f05e' !important;
font-size: 12px;
position: relative;
top: -0.8em;
color: #d81717;
}
Here is the HTML,
<ion-item *ngFor="let eventItem of dayEvents" text-wrap>
<ion-icon [name]="eventItem.icon" item-left></ion-icon>
<ion-icon name="create" item-right color="secondary" (click)="addEvent(eventItem)"></ion-icon>
<ion-icon name="trash" item-right color="danger" (click)="removeEvent(eventItem)"></ion-icon>
<p class="title">{{eventItem.title | slice: 0: 30}}</p>
<p class="subtitle" *ngIf="eventItem.description">{{eventItem.description | slice: 0: 40}}...</p>
<p class="times">{{eventItem.start | date: 'shortTime'}} - {{eventItem.end | date: 'shortTime'}}</p>
</ion-item>
final result :
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
I manage to make it fit for one size of icon, no problem,
But when I try to use the icon elsewhere, the icon does not fit anymore.
Please note that in the second images, the font are bigger.
Any help would be appreciated. Thanks.
Please look at the snippet below. The CSS part. Probably you'll have to adjust classes and set the desired font-size to .item-icon.
.item-icon {
font-family: 'FontAwesome';
position: relative;
font-size: 60px
}
.item-icon:before {
content: '\f133';
color: #d81717;
}
.item-icon:after {
content: '\f05e';
font-size: .5em;
position: absolute;
top: .8em;
left: .5em;
color: #d81717;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
I need help making the Email Opt-In bar under the Header look at the same on mobile devices as it does on my desktop. Here is the website.
I am not skilled in any kind of coding so any help would be greatly appreciated! :)
Here is the CSS I am currently using:
/* this would be the color and size of the main bar */
#nsu-head {
background-color: #ffcfde;
padding: 34px;
}
/* basic text color and placement */
#nsu-head p {
float: left;
color: #000000;
margin-top: -5px;
padding-right: 10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
text-transform: uppercase;
padding-left: 50px;
padding-right: 30px;
margin-top: 0;
}
#nsu-form-1 label {
display: none;
}
/* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
/* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}
/* placement of post sign up text if no thank-you page */
p#nsu-signed-up-1 {
float: right;
font-size: .9rem;
color: #DDD;
padding-right: 0;
margin-top: -18px;
width: 45%;
}
your code is quite messy, but try doing this:
1) Look for Aweber's code. IN your source code looks like this
<div class="nsu-form" id="nsu-head">
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
<!-- Form by Newsletter Sign-Up v2.0.3 - http://wordpress.org/plugins/newsletter-sign-up/ -->
<form class="nsu-form" id="nsu-form-0" action="http://www.aweber.com/scripts/addlead.pl" method="post"><p><label for="nsu-name-0"> </label><input class="nsu-field" id="nsu-name-0" type="text" name="name" placeholder="Name" /></p><p><label for="nsu-email-0"> </label><input class="nsu-field" id="nsu-email-0" type="email" name="email" placeholder="Email" required /></p><textarea name="nsu_robocop" style="display: none;"></textarea><p><input type="submit" id="nsu-submit-0" class="nsu-submit" name="nsu_submit" value="Get it!" /></p></form>
<!-- / Newsletter Sign-Up -->
</div>
it might be different in your Aweber's code, but you'll get the idea. Now, if your plugin allows it to, try to move this part:
<p class="form_label">Get <span style="font-style:italic;">Free</span> Tips to Be a Healthier Mama!</p>
outside <div class="nsu-form" id="nsu-head"> (thus, that paragraph has to be BEFORE this nsu-form line)
Once you have this all, be sure to remove everything you currently have in your code and add it to header-left, like this:
<div id="header-left-section">
YOUR CODE HERE
</div><!-- #header-left-section -->
this will make your theme work as expected. That is: your form on the left and full width on mobile and your nav on the right and full width on mobile.
However, if you also want it to be full width in ANY screen, add this to your CSS:
#header-left-section, #header-right-section{float:none !important; clear:both; display:block}
This should fix every issue you have