WordPress 5.3.3
Theme: Maison (for architects and interior designers)
WooCommerce 4.0.1
Now I have a display problem of the product single page and the standard gallery that comes with WooCommerce.
On left hand next to the main product picture I already see a small vertical stripe of around 10px of the last picture.
<div class="zoom slick-slide" data-slick-index="3" aria-hidden="true" style="width: 557px; position: relative; overflow: hidden;" tabindex="-1"> <img src="https://URL/wp-content/uploads/2020/04/M-Serie_detail_01-1.jpg">
<img src="https://URL/wp-content/uploads/2020/04/M-Serie_detail_01-1-600x600.jpg">
<a href="https://URL/wp-content/uploads/2020/04/M-Serie_detail_01-1.jpg"
class="nickx-popup fa fa-expand" data-fancybox="product-gallery" tabindex="-1"></a> <img role="presentation" src="https://URL/wp-content/uploads/2020/04/M-Serie_detail_01-1.jpg" class="zoomImg" style="position: absolute; top: -984.452px; left:-1430.05px; opacity: 0; width: 2000px; height: 2000px; border: medium none; max-width: none; max-height: none;"> </div>
I spent hours in trying to solve that issue...has anyone any idea? Lays the problem in the woocommerce slider or do I have to change in the theme settings?
Related
I'm using WordPress. The designer put a WhatsApp button that shows on the entire website. Any idea where I can find that snip of code to remove it? I checked the plugins, and I'm sure it is not a plugin.
This is what I see when I inspect the element. Any help please?
<div id="whatsapp_desktop" style="
position: fixed;
display:none;
z-index: 5;
left: 11px;
width: 100%;
height: 50px;
bottom: 40px;
">
<i class="fab fa-whatsapp" style="font-size: 50px;color: #3bc5aa;margin-right: 10px;"></i>
</div>
You must use important:
display:none!important;
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
I have created a mobile view for my site, here.
http://105.161.113.68:8080/qualebs/home
username = susan
passord = suzzy
if you login from a mobile device with preferably opera mini, you will notice that clicking on any element even the box around the login page reloads the page. I don't know what is responsible for this. please help.
The css for the containing div containing the profile photo, username, and the status is as follows.
.feedContainer{
display: inline-block;
float: left;
margin-right: 5px;
cursor: pointer;
text-align: left;
width: 95%;
max-width: 800px;
border: solid 1px #f5eabe;
border-top: none;
background: #fff;
}
in the css for the mobile page I add the following style
.feedContainer{
float: none;
width: 100%;
max-width: 100%;
border-right: none;
border-left: none;
margin: 0px;
cursor: auto;
}
There is no Javascript on the mobile view. My problem Is that every element behaves like a link that if you click it reloads the page. How can I remove this.
example feed container for mobile site looks like this
<div class="feedContainer">
<span class="profileImgContainer">
<img class="profileImg" src="img/thumbs/1/1377284547880_1377284934730.jpg" alt="photo"/>
</span>
<div class="feedHeader">
<span class="time">moments ago</span>
<strong>
susan
</strong>
</div>
<div class="feed">
<pre><span class="shorten">Hello guys if you are already logged on here, please let me know what you are seeing</span></pre>
</div>
<div class="feedFooter">
<span class="feedFooterWidget">
0
Comments
</span>
<span class="feedFooterWidget">
<span class="count">
0
</span>
<a class="footerLink" href="like?item=status&itemId=1377338479531&posterId=1377284547880&view=likes">Likes</a>
</span>
<span class="feedFooterWidget">
<span class="count">
0
</span>
<a class="footerLink" href="share?itemType=status&statusId=1377338479531&posterId=1377284547880">Share</a>
</span>
<span class="feedFooterWidget">Message</span>
<span class="feedFooterWidget">Delete</span>
</div>
</div>
I'm sorry for future readers of this question the server was running on a local server and I lost the connection.
you can set pointer-events:none; in the mobile css for the elemenet that is triggering the page reload
How could I show the thumbnail images align properly on the top left for each news feed?
this is the codes for each item's feed, I couldn't alter the format below because it's was rss feed from external site
<style>
img{
float: left;
width: 100px;
height: auto;
}
.feed-item-title{
clear:right;
}
</style>
<div class="feed-item">
<h3 class="feed-item-title">
Rihanna Hug During VMA Show
</h3>
<div class="feed-item-body">
Former couple share embrace on night when both won major awards.<br />By Hosten
<a href="">
<img type="photo" src="281x211.jpg" />
</a>
<br />
</div>
</div>
Thanks alot.
If you use floats you should clear them.
.feed-item-body:after{
content: '';
display:block;
clear:both;
}
Later Edit: Few extra changes added, here is the working example.
The same question has been asked in this post, but the accepted answer doesn't help (me, at least).
I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!
<div id="view1" dojoType="dojox.mobile.View" selected="true">
<h1 dojoType="dojox.mobile.Heading">View 1</h1>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
</li>
</ul>
</div>
<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
<h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
<div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>
Update:
<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
<h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
<div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
Firebug logs
I had similar display problem with Dojo mobile + Google maps api version 3.
Simons solution did not work, but there was another way.
I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })
the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.
This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)
EDIT:
Nothing pops out to me. Have you tried maybe using script to modify it ? something like:
var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";