I have tried following multiple guides on Stack Overflow however none seem to work on my website. The issue I am having is hiding the following code on mobile view only.
<div class="rte nice-paragraph">{{side_title[0]}}</div>
This is in a Shopify Liquid and any help would be greatly appreciated.
Thanks in advance/
Please add following css code in the file
<style>
#media only screen and (max-width:767px){
.nice-paragraph {display:none;}
}
</style>
Thanks
Related
This have been asked several times but I can't seem to get an updated answer.
I've been trying to load a fontawesome icon in my .scss and I specifically followed this instruction https://fontawesome.com/how-to-use/on-the-web/using-with/sass but I'm still just getting squares.
Here are my codes
_fontawesome.scss
#import './scss/fontawesome.scss';
#import './scss/solid.scss';
.user {
#extend %fa-icon;
#extend .fas;
&:before {
content: fa-content($fa-var-user);
}
}
index.js
<span className="user" />
_variables.scss
$fa-font-path: "../webfonts" !default;
My directory
public/
fontawesome/
scss/
webfonts/
_fontawesome.scss
If it helps, I'm using this for react and I can perfectly use FontAwesome as a component using npm, but I have this case where I need to use it in the scss.
Please help! Thank you!
how you don't use the font awesome CDN ? it's works perfectly for me.
And it would keep you from getting bored with it :(
something like that to your and it's works:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
I'll take a closer look at your problem, but tomorrow because it's to late :p
I have a phone number on a website. It looks good on a laptop, but on a mobile device half of the number jumps to the next line. It doesn't look good.
So how can I create a line break that will only work on a mobile device sized screen?
I am not very experienced in coding, so please be specific :) Thanks a lot for any help!
Why not just do a line break as a class in the tag?
<br class="mobile-break">
and in CSS
#media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
If you use Bootstrap 4 just use the break like this:
<br class="d-md-none">
You could look into the CSS word-break property to prevent words/strings being cut in half. If it is specifically line breaks you want to use then appending a class to the element such as <br class="br-on-mobile"> and setting it to display: none in the CSS should prevent it from doing anything normally.
You can then use a media query to display the line break at specific mobile screen sizes, for example:
.br-on-mobile {
display: none;
}
#media screen and (<Your conditions here>) {
.br-on-mobile {
display: static;
}
}
EDIT: static is invalid value for display. Using inherit should fix the issue. See this Fiddle
EDIT: The header of your page must also have <meta name="viewport" content="width=device-width, initial-scale=1"> to allow for correct scaling/application of media queries.
You could also achieve this by wrapping the number in a span element and setting this to display: block when on mobile devices, although your issue with the media queries below will also apply to this.
If you're looking into this in the future for something that works in Tailwind CSS, I found this to mirror the Bootstrap and BULMA style implementations (choose your breakpoint between sm/md/etc):
<br class="md:hidden">
Instead of space between the number, add this is non-breaking space which will prevent a new line being added.
This should work on BULMA: <br class="is-hidden-desktop" />
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}
I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>
I've a 200x200 px div in which I put a background-image.
The div is resizable and keep ratio.
In recent browsers, "background-size: cover;" or "background-size: contain;" works fine but under IE7, it doesn't work.
Does anybody have a suggestion / trick to fix that ?
Thank you very much in advance.
If the image is smaller than the div could you not repeat it using the following CSS?
{
background-image:url('bg.gif');
background-repeat:repeat-y;
}
If not, could you please provide a link to the deployed code.
Try jQThumb. It was built to fix background-size issue in IE6, IE7, and IE8