We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
Related
I would like to remove the following from the HOMPE PAGE ONLY!
I have access to page editor but not sure what to insert in the CSS editor on that page.
I want to remove the below:
<div class="fs_img_header header_video_fs_view" style="width: 1028px; height: 789px;"><div class="stat_img_cont" style="background-image: url();background-size: cover;background-position: center center;"></div></div>
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none;
}
if you're using Wordpress and the css has no effect:
.fs_img_header, .header_video_fs_view, .stat_img_cont {
display: none !important;
}
To display it only on the homepage use following plugin (easy-way):
https://de.wordpress.org/plugins/css-javascript-toolbox/
With this plugin you can choose where it displays your custom css (in this case the homepage).
Let me know if this helps.
Below is the link of codePen, you can see if its window size then image get border on hover,
In mobile devices it get border on touch. but it doesn't go away if user is not touching it (after touching it). user needs to touch outside the image then its border goes away.
In the below image, user touch the image and its showing border, later user is not touching it and its still showing border.
.swap {
background-image: url('https://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg');
width: 200px;
}
.swap a {
display: block;
}
.swap a img {
width: 200px;
height: auto;
}
.swap a:hover img {
border:10px black solid;
}
.swap a:focus img {
border:none !important;
}
<div class="swap">
<a>
<img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129">
</a>
</div>
Adding the :focus pseudo class will work for you to override what is happening.
.swap a:hover img {
border:10px black solid;
}
.swap a:focus img {
border:none !important;
}
If you are working on a responsive project that you do not want :focus to show on non-touch devices you can try to target devices by size, or more reliably, you could use Modernizr to feature detect.
So I solved this question by JavaScript events,ontouchstart and ontouchend please check out the below plunkr link
https://plnkr.co/edit/bVFQMUjJXo5SvLGroQH3?p=preview
function myFunction()
{
document.getElementById('swap').setAttribute("class", "style1");
}
function myFunctions()
{
document.getElementById('swap').setAttribute("class", "style2");
}
<div id="swap">
<a><img src="https://vignette.wikia.nocookie.net/undertale-au/images/5/54/Link.jpg/revision/latest?cb=20170903211129" ontouchstart="myFunction()" ontouchend="myFunctions()" >
</a>
</div>
Prepared for another query, just replace P with your element.
It now seems best to avoid using hover altogether with ios or touch in general. The below code applies your css as long as touch is maintained, and without other ios flyouts. Do this;
Jquery add: $("p").on("touchstart", function(e) { $(this).focus(); e.preventDefault(); });
CSS: replace p:hover with p:focus, and add p:active
Options;
replace jquery p selector with any class etc
to have the effect remain, keep p:hover as well, and add body{cursor:ponter;} so a tap anywhere ends it
try click & mouseover events as well as touchstart in same code (but not tested)
remove e.preventDefault(); to enable users to utilise ios flyouts eg copy
Notes
only tested for text elements, ios may treat inputs etc differently
only tested on iphone XR ios 12.1.12, and ipad 3 ios 9.3.5, using Safari or Chrome.
I am trying to hide the header and footer from a specific page on my website. I am using a theme I downloaded online. The specific page I am trying to hide is http://ai-home.com/dsme/
I installed a custom CSS plugin so that I can customize the CSS on this page. I inspected the page element and can see that I am most likely trying to hide the
div id="header-space" and div id="footer-outer"
After reading online I think the code should be
.page-id-5321 .site-header, .page-id-5321 .site-footer {
display: none;
}
or
.page-id-5321 .site-header-space, .page-id-5321 .footer-outer {
display: none;
}
When I publish, I do not see any changes to the page. I am not a developer so I want to make this edit as easily as possible without it affecting the rest of my website.
EDIT:
tried some suggestions and was able to fix most of the problem, but now I am stuck with a big grey bar on the bottom but I can't find it via inspect element.
EDIT#2: So the CSS looks like this right now, but still stuck with a grey bar on the bottom
#header-outer { display: none;}
#header-space { display: none;}
#footer-outer { display: none;}
Use the visibility property as hidden.
Like [ visibility:hidden ]
In your header class/id.
Please try below code for removing header-outer, header-space and footer-outer
.page-id-5321 #header-outer, .page-id-5321 #header-space, .page-id-5321 #footer-outer {
display: none;
}
I think if you use wordpress, in your specific page can use other header or/and other footer.
Change
get_header();
to
get_header('<other header file>');
same with footer
Try it
<div id="header-space" class="hide">xyz</div> and <div class="show" id="footer-outer">abc</div>
csscode:
.hide{display:none;}
.show{display:block;}
If you need to hide a block/section then just add class:hide to HTML OR for showing use class name show like mention above.
Hope it will work. Revert if it is not.
For grey bar solution
#footer-outer #copyright, body {
border: none!important;
background-color: #f8f8f8!important;
}
By changing the color of footer you can use the same background.
I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.
The left sidebar has
its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)
When the user clicks on "Show / Hide" I want to:
Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).
Is there any way to do this in CSS?
<div class="parentBlock">
<div class="toggleBlock">Show / Hide</div>
<div class="divBlah">div1</div>
<div class="divBlah">div2</div>
<div class="divBlah">div3</div>
</div>
Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.
Is this possible?
I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock)
(http://tympanus.net/codrops/2012/12/17/css-click-events/)
I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.
Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(
(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)
Here is a CSS only solution using target
DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/
.button {
display: block;
width:60px;
background: red;
z-index:1;
}
#element {
display: none;
background:#fff;
margin-top:-20px;
z-index:2;
}
#element:target {
display: block;
}
#show:target {
display: block;
}
#hide {
background: #000;
color: #fff;
}
As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:
div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }
for more information see this: http://css-tricks.com/child-and-sibling-selectors/
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.