ReactJS Webpage not displaying correctly - javascript

I have just finished working on a webpage and decided to deploy in on GitHub Pages using Yarn. The problem is everything looked good when it was running on localhost but some things didn't display correctly on deployed version in my browser.
I tested it on browsers:
Google Chrome 86.0.4240.193
Safari 13.1
In both the same issue appeared. Here are some screenshots of comparison when running on localhost and online:
Localhost:
Online:
On the second one there is a barely visible outline of my buttons. I was thinking some of my CSS may have caused this so here is also my styling for these buttons:
.button {
width: 29vw;
height: 40vh;
margin-left: 1.5vw;
margin-right: 1.5vw;
border: 3px solid black;
border-radius: 10px;
outline: none;
padding: none;
cursor: pointer;
opacity: 70%;
font-family: myFont;
font-size: 6vh;
color: black;
}
.button:hover {
opacity: 100%;
animation: swing 1s;
}
Any idea why is this happening? Thank you for any help.

After some time playing with my CSS I found what the problem was and was able to fix it. Indeed my initial thoughts were right and opacity was causing this problem was.
If anyone else has the same problem here is a quick fix. Just change from:
opacity: 70%;
to:
opacity: 0.7;

Related

How to set the scroll bar to my popup window?

I have threnter image description hereee images inside my popup window, and i need to set the scroll bar to be able to see all of them, but it´s not posible to scroll throw the popup window to see the images below. Hope someone can help, enter image description here
Regards. Sorry, but I can not show the code for a personal reason, hope you understand,
CSS properties below
.popup {
background-color: #08303a;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
padding: 10px;
text-align: center;
width: 400px;
max-height: 350px;
height: 350px;
overflow:scroll;
opacity: 0;
transition: .3s ease all;
transform:scale(0.7);
}
Without seeing your code - I believe this one will be a case of setting the following CSS property to your pop-up window:
overflow: scroll;
For future reference - it's useful to put the code you've worked with onto Stack Overflow so people can review your code and give you a definitive answer. Without it, people will just have to guess.
Hope that helps.

While implementing Google Maps using the Javascript API, the whole map doesn't seem to be loading for me

I get big areas of gray that never fill in - even if I zoom. You can view a sample here - http://birdbrain.vernerwebstudio.com/professional-development/. This was working fine before, but all of a sudden one day, it just started doing this. I've removed any custom functionality that was added thinking that was the problem. Any ideas?
You've set some styling in the style-custom.css file which affects the map's images (<img> elements):
#pln-map .gm-style-iw img, #pln-map .gm-style img {
height: 145px;
width: 145px;
border-radius: 50%;
display: block !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Most important is: border-radius: 50%;

Issues with bxslider

I am having several issues getting bxslider to work the way I am wanting. First and most importantly, it does not load unless I bring up the developers tools. I have no idea why this is the case.
I have all three of the js files on my page
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
As well as the css page for bxslider.
My second issue is I can't figure out the DOM to get this style the way I am wanting. All I want to be able to do is controls the margins/padding between images and the top and bottom margins for this slider, to enable me to control the space around it.
I'm not sure what I am doing wrong:
.slider4 {
padding: 100px auto;
border: none;
}
.bx-wrapper {
width: 100%;
border: none;
}
.bx-viewport {
width: 85%;
border: none;
}
.slide {
margin: 0 100px;
}

Weird misalignment in some PC's only

I'm working on a website and the client wanted exactly the mockup. The problem is, the headers and some other divs that I've been using with a background are giving me some problems. And for the first time in my experience, it's not a browser-specific problem.
This is how my sister (I asked her to send me screenshots from another PC...) and I see it:
But, in every Mac, every mobile device, and the PC at my office, I see it like this:
As you can see, only in SOME Windows PCs, there's extra padding in top of the text. If I get rid of the padding-top of the titles, it comes back to "normal", only a pair of pixels thinner.
Here's the html for the title:
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
And this, is the css of that part of the html:
.contentHeader{
line-height: 38px;
padding-top: 6.5px;
padding-left: 11px;
background-color: white;
/*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
font-size: 20px;
letter-spacing: 1px;
}
.square{
font-size:20px;
background-color: black;
line-height: 15px;
min-height: 19px;
min-width: 19px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
font-family: "Arial";
}
I'm open to any solutions... I already use jQuery for some things in this site, so it could be a fix if it really works.
I made sure that the cache is not the problem. And I tested it in my PC in Chrome, Firefox and Edge... everywhere's the same. As I said, I only saw that in my PC and my sister's. Both of us use Windows 10, and in my office I have Windows 10 too. Any ideas of the cause?
Your top have padding and your bottom don't. I made both with the same padding:
.contentHeader{
height: 38px;
line-height: 38px;
padding-left: 11px;
font-size: 20px;
letter-spacing: 1px;
background: skyblue;
padding-top: 10px;
padding-bottom: 10px;
}
.square{
font-size:19px;
background-color: black;
line-height: 19px;
min-height: 19px;
min-width: 19px;
display: inline-block;
vertical-align: text-bottom;
margin-right: 5px;
margin-left: 1px;
margin-bottom: 2px;
}
<div class="contentHeader"><b><div class="square"><!--◼--> </div>IN PROMOTION</b></div>
First, don't use <b>. If you mean to bold the text, use font-weight:bold in CSS.
Putting block-level elements in inline elements (a <div> in a <b>) will cause unexpected positioning. This is probably what's causing this, but we can't say for sure.
Don't alter line-height for positioning purposes. That's solely for text spacing.
Lastly, surround the text in a <span> and use display:inline-block on it (so it obeys vertical paddings). That way, you can position both the square and the text with paddings as well as target it for font-weight:bold.
Try just this and work your way with just paddings and dimensions.
<div class="contentHeader">
<div class="square"></div>
<span class="promotion-text">IN PROMOTION</span>
</div>
toss in some javascript code to read the info, and let it be placed in very bottom footer or some such. it might give details of what is pushing what.
chrome / firefox both have built in or third party apps to install to "right click" and choose inspect. you might find something, some place within the "dom" tree.
=================
honestly not sure what you are talking about... the images you linked to. both show "scrolling" left/right and up/down or at least that is what it seems like. good chance you are going out past "width" and/or "height" of the screen and causing scroll bars to happen per say.

Browser Neutral checkbox needed IE vs Chrome

I've been reading a lot of online resources to define browser neutral check boxes, I must find a way to define this style in common.css for check boxes in IE& chrome which is used by aspx,ascx,etc pages
As long as enabled boxes are white and disabled boxes are grey, I will be happy (enough) with them
Please help, shed some light.
So far I have tried many diff styles but not working..
Make checkbox in chrome look like one in IE
below is almost close what I was looking for but its not setting grey color when checkboxes are disabled.
.mycheckbox {
position: relative;
width: 14px;
height: 14px;
border: 1px solid #111;
background: #fff;
-moz-appearance: none;
-webkit-appearance: none;
-appearance: none;
}
.mycheckbox:checked {
background: url(http://vignette3.wikia.nocookie.net/roblox/images /5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
background-size: 100%;
}

Categories

Resources