I want to change text "proceed to payment" to "Buy now", if media query is 767px
const CheckoutButton = styled(GreenButton)
text-transform: none;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-weight: 500;
height: 40px ;
font-size: 1rem;
padding: 6px 20px !important;
margin-left: 100px;
<CheckoutButton disabled={isSubmitting || disabled} onClick={handleSubmit} type="submit">Proceed to Payment</CheckoutButton>
In pure CSS, you can add the button's label via a pseudo-element:
.testbutton::before {
content: 'buy now';
}
#media (min-width: 767px) {
.testbutton::before {
content: 'proceed to payment';
}
}
<button class='testbutton'></button>
That being said, I'm not thrilled about having the button label in the CSS. In React, I always have a "uiStore" that allows components to keep track of the screen size and brakepoints, if they must. Then you could have something like:
const CheckoutButton = props => {
const { layout } = uiStore
return (
<button>
{layout === 'mobile' ? 'Buy now' : 'Proceed to payment'}
</button>
)
}
Possible Solution
Add/Remove inline text elements as per media query
Solution
React
<CheckoutButton disabled={isSubmitting || disabled} onClick={handleSubmit} type="submit"><span className="desktop-text">Proceed to Payment</span><span className="mobile-text"></span></CheckoutButton>
CSS
.mobile-text {display: none;} #media screen and (max-width: 767px) {.desktop-text {display: none;}.mobile-text {display: inline-block;}
Related
I have this in my React app:
<Nav>
<BasicBtn>Basic button</BasicBtn>
<MainBtn>Main button</MainBtn>
</Nav>
The font size for buttons is set globally:
// globals.css
button {
font-size: 24px;
}
What I want to do is to reduce BasicBtn's font size via the Nav component to 20px, meaning I want it to be smaller when wrapped inside Nav; however, I do NOT want to affect MainBtn, whose font size is set to 14px in its own module. What happens, instead, is that the font size set in Nav overrides the font size set in MainBtn, so MainBtn is 20px as well instead of 14px.
This is my Nav component:
// Nav.js
import styles from "./Nav.module.css"
const Nav = ( { children } ) => <nav className={ styles.Nav }>{ children }</nav>
export default Nav
// Nav.module.css
.Nav button {
font-size: 20px;
}
This is my BasicBtn component:
// BasicBtn.js
import styles from "./BasicBtn.module.css"
import cn from "classnames"
const BasicBtn = ( { children, extraStyles } ) => {
return <button className={ cn( styles.BasicBtn, extraStyles ) }>{ children }</button>
}
export default BasicBtn
// BasicBtn.module.css
.BasicBtn {
padding: 10px;
background: green;
color: white;
}
This is my MainBtn component:
// MainBtn.js
import styles from "./MainBtn.module.css"
import BasicBtn from "../BasicBtn"
const MainBtn = ( { children } ) => <BasicBtn extraStyles={ styles.MainBtn }>{ children }</BasicBtn>
export default MainBtn
// MainBtn.module.css
.MainBtn {
font-size: 14px;
}
This is the generated HTML:
<nav class="Nav_Nav__WC_B6">
<button class="BasicBtn_BasicBtn__q_G1X">Basic button</button>
<button class="BasicBtn_BasicBtn__q_G1X MainBtn_MainBtn__92Bu4">Main button</button>
</nav>
And these, in this order, are the CSS rules that I get when clicking on the generated MainBTN (copied from DevTools):
.Nav_Nav__WC_B6 button {
font-size: 20px;
}
.MainBtn_MainBtn__92Bu4 {
font-size: 14px;
}
.BasicBtn_BasicBtn__q_G1X {
padding: 10px;
background: green;
color: white;
}
Shouldn't the .MainBtn_MainBtn__92Bu4 selector take precedence over .Nav_Nav__WC_B6 button, seeing as it is more specific?
This my code: codesandbox.io
CSS
#media (width > 736px) {
#LogoMonni-mobile {
display: none;
}
}
#media (max-width <= 736px) {
#LogoMonni-pc {
display: none;
}
#LogoMonni-mobile {
display: block;
}
}
JSX
import { ReactComponent as LogoMonniPC } from "./logoMonniPC.svg";
import { ReactComponent as LogoMonniMobile } from "./LogoMonniMobile.svg";
import "./styles.css";
export default function App() {
return (
<div className={"LogoMonni"}>
<LogoMonniPC />
<LogoMonniMobile />
</div>
);
}
When the screen size is > 736px I show the computer version of the SVG, and when <= 736px I show the mobile version, but for some reason <LogoMonniMobile /> does not appear on the screen. What is the reason and how can this be fixed?
You cant use logical operators like <.
#media screen and (min-width: 737px) {
#LogoMonni-mobile {
display: none;
}
}
#media screen and (max-width: 736px) {
#LogoMonni-pc {
display: none;
}
#LogoMonni-mobile {
display: block;
}
}
As i understand the id problem LogoMonni_0 LogoMonni_1 LogoMonni_2 ... if id sv1 are the same as scg2 I don’t know for some reason the browser thinks they should disappear
I have some JS functionality that changes the css class on my body element. Based on a click, i will change the css class of my body element to one of the following: .font-default, .font-medium, and .font-large.
I have the following mixins that determines the font size of an element based on the body element's class. That looks like this:
#function rem-calc($size) {
$remSize: $size / 16;
#return #{$remSize}rem;
}
#mixin font-size($size) {
#if $size >= 20 {
font-size: rem-calc($size);
} #else if $size == 18 {
font-size: rem-calc(18);
.font-large & {
font-size: rem-calc(20);
}
} #else {
font-size: rem-calc($size);
.font-medium & {
font-size: rem-calc($size + 2);
}
.font-large & {
font-size: rem-calc($size + 4);
}
}
}
An example of me using this mixin is as follows:
.content {
#include font-size(16);
#media (min-width: 1024px) {
#include font-size(30);
}
}
Here's is the corresponding html and css on the linked codepen at the bottom:
<body class="body">
<div class="content">Content</div>
<button class="button">
click to add
</button>
</body>
<script>
const button = document.querySelector('.button')
button.addEventListener('click', () => {
console.log(document.querySelector('.body'))
document.querySelector('.body').classList.add('font-medium');
})
</script>
According to my ruleset (the mixin), in the desktop version, font-size should remain unchanged since size >= 20. However in practice, when I click the button that changes the class to medium, it uses the "mobile" version of the style and overwrites the style that's placed in the media query.
Is there anyway regarding specificity such that I can still use this mixin so that the mobile styles don't bleed into the styles nested in the media queries?
If not, what might be a different solution to this problem?
Here's a pen that shows the issue. When clicking the button, I want the font to remain unchanged. https://codepen.io/rv-akim/pen/WVJpWj
You can clearly see that .font-medium .content is overriding .content due to the fact the former is more specific even though .content is inside of a media query.
Update your code so your normal state of the font size uses a class
#mixin font-size($size) {
#if $size >= 20 {
.normal & {
font-size: rem-calc($size);
}
} #else if $size == 18 {
.normal & {
font-size: rem-calc(18);
}
.font-large & {
font-size: rem-calc(20);
}
} #else {
.normal & {
font-size: rem-calc($size);
}
.font-medium & {
font-size: rem-calc($size + 2);
}
.font-large & {
font-size: rem-calc($size + 4);
}
}
}
.content {
#include font-size(16);
#media (min-width: 1024px) {
#include font-size(30);
}
}
Add class normal to your body tag
<body class="body normal">
Basically, where you only declared the font size rule, I wrapped it with .normal & {}
If you learn to use the Inspector, it will save you tons of headaches later
This is my situation:
I have a web app that allow users to change the UI size. (i.e. small, medium or large button)
Users can change how it looks like dynamically during runtime. All text and form input boxes will be resized.
My project is in Vue.js.
What is the best way to solve this? Loading different css when user click?
Load different CSS while user click the button similar to this . Codepen : https://codepen.io/anon/pen/NJEoVM
HTML
<div id="app" :class="size">
<div class="text">Text</div>
<input class="ipt"/><br/><br/>
<button class="btn" #click="change('small')">Small</button>
<button class="btn" #click="change('medium')">Medium</button>
<button class="btn" #click="change('large')">Large</button>
</div>
CSS
.small .ipt{
width: 100px;
height:30px;
}
.small .text{
font-size: 18px;
}
.medium .ipt{
width: 300px;
height:50px;
}
.medium .text{
font-size: 32px;
}
.large .ipt{
width: 600px;
height:100px;
}
.large .text{
font-size: 64px;
}
Javascript
new Vue({
el: '#app',
data:()=>({
size:'small'
}),
methods:{
change(val){
this.size = val
}
}
});
Actually, you can make use of Custom Properties aka CSS variables.
Firstly, define the button CSS styles
/* button.css */
#buttonRef {
--fontSize: 16px;
font-size: var(--fontSize)
}
The overall flow would be something like the following one e.g
methods: {
changeButtonSize: function(size, event) {
event.preventDefault();
/* size might be either of 's', 'm', 'l' */
/* let the button ref is stored in refs */
const buttonRef = this.$refs[“buttonRef”];
let fontSize = 16;
switch(size) {
case 's':
fontSize = 12;
case 'm':
fontSize = 18;
case 'l':
fontSize = 22;
}
/* dynamically change the value for custom property */
buttonRef.style.setProperty("--fontSize", fontSize);
}
}
you can set up 3 classes:
.small {font-size:12px}
.medium {font-size:18px}
.large {font-size:24px}
Then add or remove them to your main parent div onClick.
If you have discreetly set the font-size on the elements, you'll have to target those elements as such:
.small .description { font-size:12px }
.small .title{ font-size:16px }
Here is the code, very simple and copy paste from office website
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
destructiveText: 'Delete Photo',
titleText: 'Modify your album',
cancelText: 'Cancel <i class="icon ion-no-smoking"></i>',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
I want to change the cancel button have a red color background, how I can achieve it in ionic frameworks?
Easiest way is to look at the markup using your browser (after running ionic serve in your terminal), for example in Chrome ctrl+shift+i, where you can choose the button and see what classes are attached. In your case you'll see something like this:
<div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
<button class="button ng-binding"
ng-click="cancel()"
ng-bind-html="cancelText">Cancel</button>
</div>
Which has styles that for the parent div, and child button something like this:
.action-sheet-group {
margin-bottom: 8px;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.action-sheet .button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: #d1d3d6;
background-color: transparent;
color: #007aff;
font-size: 21px;
}
Just change these values either in Sass or directly in your styles sheet if you're not using Sass.