I'm currently in the process of creating a website, but I must admit that my CSS skills aren't top-notch.
On the mobile version of the page, there seems to be some empty space appearing on the right side. You can take a look at it here: (www.perfectshinesmile.com)
The issue with your container not centering in mobile view is due to the missing 'auto' value in margin:0 auto property.
To fix this, make the following change in main.css at line number 2638
@media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
This adjustment should resolve the problem. :)
It seems like your .container has a max-width property set to 360px. I suggest changing it to max-width: none. However, using the Bootstrap grid system for your web layout would be a better option as it can help you avoid such issues. It looks like many elements in your code have specific width values, causing layout problems on mobile devices.
It appears that in your situation, there is an additional scroll bar!
Alternatively, you can try the following:
::-webkit-scrollbar {display:none !important;}
Another approach could be:
@media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Avoid using overflow:scroll; unless absolutely necessary, especially on mobile devices!
I've successfully integrated a lottie animation into my code. On the initial load, I'd like to display a specific frame. When the user hovers over it, I want the animation to start from the beginning and play through in its entirety. Here's ...
While my layout functions properly in Chrome, I am encountering an issue in IE where the main content area is displaying scrollbars instead of filling out 100% as intended. Is there a way to fix this? In the design I am working on, the main content area h ...
Currently, I am interested in crawling the dynamic content within an IFramed webpage; Unfortunately, none of the crawlers I have tested so far (Aperture, Crawl4j) seem to support this feature. The result I typically get is: <iframe id="template_cont ...
I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...
After developing some CSS classes to define specific hex colors for my web application, I ran into issues applying these styles to text in the HTML. Despite my best efforts, I am struggling to make the styles show up as intended. CSS .custom-orange-color ...
My code snippet: <div id="sw" style="cursor:pointer" > <object id="swfobj" type="application/x-shockwave-flash"> </object> The JavaScript part: function openfile(filePath) { $("#swfobj").attr("data", filePath); $("#sw ...
Utilizing DataTables in conjunction with Bootstrap 4 for client-side processing while displaying approximately 2,000 records. The loading time is acceptable, but upon refreshing the page (F5), I observe an unformatted DataTable briefly appearing. It seems ...
I'm grappling with the issue of how to prevent the side-nav from obscuring the top element in the vanilla Bootstrap 4 example provided below. Any tips? (Problem resolved - check below for solution) This problem is occurring not only on my website bu ...
I am looking to customize the color scheme of my tab-pane. My goal is to have each tab turn "orange" when clicked, while keeping the rest of the tabs in a "gray" color. Below is the code I am currently experimenting with: <!-- Nav tabs --> <ul ...
I have been working on a project involving a multilingual layout. One concern that has arisen is: What is the proper way to handle text-input in this scenario? To better explain my issue, I created a JSFiddle. If I simply add the attribute dir="rtl", ...
Is there a way to replicate the scroll functionality of a text input with readonly="readonly"? When the text exceeds the box size, you can highlight and scroll to view it all without a visible scrollbar. I am interested in achieving this effect within a p ...
http://jsfiddle.net/58arV/ Trying to create a question component where users can choose the correct answer out of 4 options. I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a c ...
Retrieve data from JSON file and display images in a gallery Successfully displaying the .json output on my HTML page. @Jesuraja - Would love to hear how you achieved this. I am currently facing the same issue with a JSON file containing image locatio ...
I'm having trouble aligning my <ol> numbers vertically at the top of the list. I've created a sample on CodePen. ol { list-style-type: decimal-leading-zero; font-size: 11px; } a { font-size: 80px; tex ...
After creating a versioned css file with the following code: elixir(function(mix) { mix.sass('demo.scss') .version('css/demo.css'); }); The file can be found at public/build/demo-34f5737738.css. According to the documentation, ...
Can you animate the movement of an element from the top-left to the bottom-right using CSS transitions like this? #example { width: 40px; height: 40px; background: red; position: absolute; top: 0; left: 0; transition: all 300ms ea ...
I've created a photo gallery using jquery. Currently, when I click on "next", the image changes based on the index. However, I also want to be able to click on the thumbnails (small images) and display the larger image according to that specific inde ...
I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...
I have encountered an issue with my basic progress bar. It seems to work fine when I include only one progress element in my HTML page. However, if I add another one, the first one works as expected while the second one does not. You can view my code on C ...
Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...