I have been asked to work on the following website by my boss: 2tec.club
The site has been built using Wordpress which I am not an expert in, I have access to only the admin dashboard.
The slider at the top has a strange bug, as you can see, every time the slide changes onto the next slide ,that particular slide for a brief second changes its height. This causes the content to be pushed down briefly which is extremely annoying for the visitors.
NOTE: this only happens on larger devices. It seems fine on my phone.
I have tried using the Chrome developer tools to change the CSS rules with no luck. I cannot for the life of me figure this one out. Can someone please be kind enough to offer their help. If so it would be much appreciated.
If you remove the slide class from your #myCarousel the problem goes away.
There's a number of other issues however. It seems as though you are including bootstrap twice, once for version 3.3.2 and once for version 3.3.6.
You also mention that you're using bootstrap carousel, but you have a carousel.js that appears to be owl-carousel.
So if you're using bootstrap carousel, and you also have owl-carousel - there is the potential for unknown conflicts.
You should review all the files you're including when you get the chance.
your theme is uploading the style.css before bootstrap.css... so its not able to overwrite the changes to bootstrap..
if you r not familiar with coding the easiest solution would be to use bigger images. at this moment your image size is 960 X 295... change it to 1200 X 368.. point is increase the width of the image...
let me know if it works
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
This is a rather odd question, particularly hard to search, as I'm not quite sure what's happening. I've designed a page with bootstrap and prepared it to scale accross many devices using the lg, md and sm prefixes and all that jazz.
The issue happens when I try to scale it in small screen sizes. The buttons, usually are list items, links and buttons. I have a section of tabs as well.
When they scale to a smaller screen they simply stop working, the tabs won't change... etc...
I figured it out, turns out I had the footer covering the rest of the page... that's why I couldn't click anywhere except the nav...
When in doubt alway use the inspect element... I guess that's the lesson to take away from this.
I'm working on a responsive website and I'm so frustrated with finding a solution for this one.
this is the basic structure:
I used 'vh' sizes and when ever the URL bar slides up - the page changes the sizes of the elements and kinda "jumps", which makes a bad user experience especially when reading.
I changed the size of the second part (orange) to 'em's because I thought maybe it will not "jump" so at least where there are texts this will not happen - and I was wrong. it's still happening.
What I'm trying to get to is to make the first part (in baby-blue) opened on all of the screen no matter what screen size is displaying the page (but without making it "jump").
I'm very frustrated finding a solution to responsive pages, can you please help me solve this, or help me with some reading material that will help me solve this ?
Note: I found some codes to add that should remove the URL bars from iPhones and it didn't work :I
Since you've tagged Javascript/jQuery I'd suggest assigning the height by getting the height the specific element (eg: window, document or viewport) you want. A good comparison can be found here. From the looks of it, you might want window.outerHeight which may account for what's "under" the URL bar. On my desktop, it's the only value that's different from the rest but on mobile other values may be different as well.
document.querySelectorAll(".whatever").style.height=window.outerHeight;
I recently took an interest in building websites and am still very inexperienced, so my apologies if this is easily answered.
I was asked by a friend to build her a simple portfolio website for fashion designs. As such, the website mainly has image galleries. The images come in various sizes and rather than ordering them manually to make it look better, I found the Masonry plugin. I implemented masonry.pkgd.min.js into my code (initialized through the HTML) and ran into two issues:
The main issue that might make question 2 moot entirely… It looks fine in IE and Firefox, but the images come up overlapping in Chrome and it looks horrible. I cleared my cache several times and tried implementing the imagesLoaded plug-in, which did absolutely nothing. I am very new to Javascript and as such have to rely on copy/pasting this sort of plug-in whereas someone else might be able to delve in and tweak it, but at the same time I had no issues getting tabbed content and this does work in two browsers. Any idea why it doesn’t work in Chrome and what I can do to fix it?
After the plug-in, I don’t seem to have any control over automatically centering the image columns in the gallery/container and they are aligned left by nature. I more or less fixed this by manually setting a margin-left that puts everything in the right place, but would like to know if there is a better solution.
Please let me know if I need to include screenshots or specific code.
Issue One:
Try adding imagesLoaded. Chrome in particular has an issue if you don't use it with masonry. I suggest trying the solution in the third box first, it's the easiest and fastest loading. This code will go in your .js file if you have one, or in your script tags if you don't.
If the "why" interests you, it's because your containers load before your pictures and don't know how tall they should be.
Issue Two:
You're right on with this one. You can't center the whole masonry container itself (you can get close, but at certain browser widths there will be a small gutter on the right), but you can center the images within their containers by adding a margin like you did or using:
position: relative;
margin-right: auto;
margin-left: auto;
I am working on Magento eCommerce site and I am running into a problem after installing a color swatch plugin. The problem appears in the thumbnail views on the product page. What exactly is happening is, when you click the down or up arrow to scroll the thumbnails, after so many clicks, the slider will get stuck and replay the slides in the same position for at least 4-5 clicks, and then it will resume, but get stuck again once it does a full loop of the images. It was functioning 100% perfectly prior to installing the color swatch plugin. I looked in FireBug but I didn't really see any obvious errors, but I am still learning how to use the tool and could have made a mistake.
Here is the URL: http://modernego.info/index.php/spring-dress.html
Here is the URL to the template I purchased in its original stat (with the working slider): http://demo.emthemes.com/manwear/index.php/briefs/reprehenderit-voluptate-8.html
Does anyone have any ideas on how I can work this out? I've tried for over 10 hours trying to fix this doing various methods, trying to duplicate other files, etc.
I would greatly appreciate any help.
I think its not because of script errors, its because of events handling, i've the same situation earlier, i've used jQuery slider, it worked perfectly on normal page but when i placed it in a floating div then its mouse event wouldn't detached
then i've handled mouse event and changed as per mouse movements...
you may debug your page by events... i think some other events causing this problem..