Having an issue on my e-commerce platform, Bence Tupperware, which is built with MVC.Net. The problem seems to be related to the slider at the top of the page. After checking in Mozilla's responsive design mode, everything appears to work fine on devices like iPhone and Galaxy models. However, when trying to access the site on an iPad or Kindle Fire running Linux, issues arise. Does anyone have any suggestions for how to resolve this?
UPDATED: necessary adjustments: Transform this media query to reduce the font size (currently set at 45px):
@media only screen and (min-width: 576px) and (max-width: 767px) {
.slider-content-1 h3 {
font-size: 16px;
}
}
You should review the font-size specifications in the CSS style sheet. Larger fonts have been selected for certain smaller screen sizes. I experimented with changing the window size in Chrome on my laptop and observed that decreasing the h3 font size was essential to prevent it from overlapping with other elements.
.slider-content-1 h3 {
font-size: 45px;
font-family: "TupperPRO", cursive;
color: #D3007E;
margin: 0;
font-weight: bold;
font-style: normal;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.slider-content-1 h3 {
font-size: 70px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.slider-content-1 h3 {
font-size: 65px; /* THIS IS LARGE */
}
}
@media only screen and (max-width: 767px) {
.slider-content-1 h3 {
font-size: 18px; /* THIS GETS OVERWRITTEN BY THE NEXT ONE FOR SOME DEVICES */
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.slider-content-1 h3 {
font-size: 45px;/* I NEEDED TO MAKE THIS SMALLER */
}
}
This illustrates the issue on a laptop view in Chrome and on an actual iPad running Safari IOS 14.
I recently encountered an issue with a project I was working on that was built using gulp. After updating the node version to v6.3.1, a task named 'html' started throwing an error. Here is a snippet of the error code: bogon:toClient work$ gulp ...
How do I adjust the alignment of my NavItem to the right? Currently, it is displaying aligned to the left. Are there any syntax errors present? <Navbar style={{backgroundColor:'#071425'}} collapseOnSelect expand="lg" variant=" ...
Currently, I am attempting to perform web scraping using a particular library while implementing Node's async/await method in my code. Within the function named 'sayhi', I have created a variable 'page' and encountered an issue wh ...
While working on my HTML form, I encountered an issue regarding the display of a warning message notifying users about the caps lock being on. Currently, the warning is shown correctly in a div located to the right of the text box. However, this div's ...
The widespread adoption of Node.js and NPM in the JavaScript community has left me perplexed. Why must we rely on such drastic measures? What issues are these tools aiming to resolve for us? [Update] I feel like my original question missed the mark. Fra ...
I am facing a challenge in setting the height of a parent ul element based on the included li's. The issue arises when the CSS property line-height contains fractional digits, causing inaccuracies in the calculation. This results in the calculated hei ...
My task involves rendering an array of comments in ReactJs, each of which can have nested comments at unknown levels. I am struggling to figure out how to display these comments with their respective nesting levels. comment 1 -- comment 2 -- comment 3 --- ...
I am looking to customize the appearance of a specific part of this code: '% discount' This section displays the percentage amount followed by the word "Discount," and I would like to apply a unique color to this "% discount" * Modify the disp ...
My aim is to transfer leaderboard information from the server to the client-side JavaScript. This is the code on my server side: const leaderboard = [[dog,cat],[car,bus],[foo,bar]] const toJson = JSON.stringify(leaderboard) res.render('gam ...
I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...
Struggling to save the chosen value from MUI Button Group into react-hook-form's state, but encountering challenges with the update not happening correctly. view codesandbox example Below is a simplified version of my code: import { ButtonGroup, But ...
I am facing an issue where I am trying to extract values of a specific key from an indexed DB and store them in an array. The array seems to work correctly within the onsuccess function but appears empty after that. It seems like the asynchronous nature ...
After loading my app and immediately taking a Chrome memory heap snapshot, I found the following results. https://i.stack.imgur.com/QB8u3.png Upon further exploration of my web app and then returning to the initial loaded page to take another memory heap ...
Looking to customize the colors of radio buttons found on this Bootstrap page By default, the background color is white and changes to blue when clicked. <div class="btn-group" role="group" aria-label="Basic radio toggle button ...
Recently, I developed a PHP function that can shorten URLs similar to popular services like goo.gl or bit.ly. This function returns the shortened link using an echo statement. Now, I am faced with the challenge of incorporating this returned link into an i ...
I'm struggling with setting and retrieving session variables using JavaScript code that calls PHP functions via AJAX. I want to access the returned session field in my JavaScript, but nothing seems to be working. Can someone take a look at my code and ...
I'm facing an issue with my code. I want to be able to remove a row by clicking on a remove button within that row, but I'm unsure of how to accomplish this. <tbody id="myTable"> <?php if (!isset($_SESSION)){ ...
How can I retrieve the index of a specific element in a JSON array converted from a PHP array using json_encode, using JavaScript or JQuery? Initially, the user will choose an option where the values correspond to people's IDs. <select class="for ...
By using the d-flex, justify-content-center, and flex-grow-1 classes, I was able to achieve my desired layout with just 3 divs. <div class="row bg-primary d-flex justify-content-center"> <div class="col-auto"> LEFT </div> < ...
Currently, I am utilizing QUnit, Sinon.js (specifically fakeServer), and jQuery (for AJAX) to capture and test AJAX calls within my program. One issue that I am encountering pertains to the inconsistency where inline-function calls are not being executed. ...