Website not showing correct format in Opencart

I am completely new to using Stack Overflow, so please forgive any mistakes I may make.

I recently implemented an SSL certificate from Comodo on my custom-built ecommerce store that runs on the OpenCart platform. Previously, the website was functioning perfectly but after installing the SSL certificate, I have encountered an issue with webpage stretching or compressing. While I don't have a specific name for this problem, I believe experienced individuals might recognize it.

If possible, could you provide suggestions or insights based on the images attached below:

Image with HTTPS:

Image without HTTPS:

htmlcsssslcompressionopencart

Answer №1

After visiting your website, I must say it appears to be functioning properly. However, there are several potential reasons for the issues you're experiencing.

  1. One major possibility is the Chrome browser itself. Many users encounter similar problems, so I recommend checking and updating both your browser and Display Drivers. It may also be beneficial to test your website on other browsers as well.

  2. If you are using a third-party template for your opencart installation, ensure that you have the latest version of the theme and that it is compatible with your current opencart version.

  3. In case you are utilizing third-party services like Cloudflare for DNS resolution and minification of Javascript, CSS, and HTML, make sure that you disable rocketloader and maintain default settings.

I hope this information proves helpful. Please keep me updated on any developments.

You mentioned having a Comodo SSL certificate. I suggest reviewing this page to confirm the security of your website: ()

If the above suggestions do not resolve the issue, I recommend revisiting your SSL installation process (link: )

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The property 'click' cannot be read from a null value during karma testing

I need help writing a karma/jasmine test case for the click event, but I am encountering an issue where the button is returning null. Any suggestions? Thanks in advance. it('should', async(() => { spyOn(component, 'clickMethod'); ...

javascripthtmlangulartypescriptkarma-jasmine

What impact does CSS scaling transform have on the flow of a document?

I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...

csstransform

What is the best way to anchor text to a specific area of an image when resizing?

I am struggling with maintaining consistent formatting for the center text on my splash/masthead/full page image, regardless of resizing. The image I am working with can be viewed [here]1 Originally, I attempted to incorporate the text into the backgrou ...

htmlcssimagebootstrap-4flexbox

basic two-column design

Located at the end of this page, you will find two distinct columns. On the right side, there is a Twitter feed, while the left side showcases a YouTube video and a comments section. Below is the HTML and CSS code that was used to create these columns: .l ...

htmlcsscss-float

Manipulate web browser to show raw HTML code rather than rendering the webpage

I'm currently working on a browser app for Windows Phone 8 that utilizes the browser control feature. Within the app, an external webpage is downloaded in the background using WebClient and stored as a string. The intention is to then display this co ...

c#htmlwindows-phone-8webbrowser-control

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

javascriptjqueryhtmlcss

Issue with meta viewport on Android devices

Creating a versatile JavaScript dialog class is my current project using JQuery to generate centered div-popups on the screen. So far, implementation across common browsers has been straightforward. The challenge arises when dealing with mobile platforms ...

javascriptandroidhtmlcssviewport

What is the best way to sort out the <li> elements within a <ul> that has a specific id

<ul class="apple" id="A"> <li> <li> ..... ...... ...... </ul> <ul class="apple" id="C"> <li> <li> ...

javascriptjquerycssfreemarker

Making a POST request with JSON data through the $.ajax() function

When interacting with my backend API, it requires data to be in JSON format like this: { "article_id" = 1 } In the front-end development process, I attempted to incorporate the following javascript code into a button's functionality: function check ...

javascripthtmljsonajaxhttprequest

JavaScript Animation Mastery

I attempted to move the small yellow box within the larger red box in all directions endlessly. Although I successfully moved it to the right and bottom, I encountered issues moving it to the left and top. Despite using Visual Studio Code, I couldn't ...

javascripthtmlcssfrontend

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

htmlangulargoogle-chromefirefoxbrowser

Discover the underlying element that is being blurred when clicked

Is there a method to determine which element triggered the blur event when clicked outside? I want to update a ui-select value to match what the user typed in if they click outside of the dropdown. However, if they click on a dropdown item, I want to disc ...

javascripthtmlangularjsui-select

Moving from CSS to SCSS: Incorporating CSS files from npm packages - A Step-by-Step Guide

I am new to SASS and currently in the process of converting my existing project's CSS files to SCSS. I know that simply changing the extension to .scss will work for my custom files, but I'm not sure how to handle the dependency style files. I ty ...

cssnpmsass

As I adjust the size of my browser, my website dynamically resizes to match

Recently, I created a website but encountered a bug where the website resizes when I resize my browser. This issue has been observed in Firefox (10.0.2), Chrome (16.0.912.77), and Opera (11.60) browsers. Interestingly, when testing other websites such as ...

htmlcssfirefoxgoogle-chromeweb

Transform bootstrap CHECKBOX into the appearance of a bootstrap BADGE

Is there a way to create Bootstrap checkboxes that resemble bootstrap badges, while still functioning as checkboxes? I attempted to style the checkbox label as a badge, but it was unsuccessful. <head> <link rel='stylesheet' href= ...

htmlbootstrap-4

Navigation bar limited to text links only

I've checked out similar inquiries, but I couldn't find a solution that fits my situation. I'm looking to make the boxes around each text link clickable, as opposed to just the text itself. HTML <div class="container"> <ul cla ...

htmlcss

Troubleshooting text-rendering CSS issues in Netbeans

body, html{ font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; color: #5a5a5a; } there was a CSS parsing error due to an unrecognized property ...

htmlcssjspnetbeans

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

css

Unable to choose more than one radio button using Angular.js

Currently, I am facing an issue with selecting multiple radio buttons using Angular.js. Below is the code snippet that demonstrates my problem. <div class="input-group bmargindiv1 col-md-12"> <label class="checkbox-inline"> <input ...

javascripthtmlangularjs

Discovering back-to-back days

I am currently working on a PHP script that utilizes a MySQL database to calculate various climatological parameters based on different variables. While I have successfully completed most of the calculations, there is one particular task that I am struggli ...

phphtmlmysql