What to change in css/html to get correct view?

Hi, I have product page and productAttributes like photos in small screen so how to fix it and what to check to get correct view in all pages



I have header in home page and other pages like this:

and in products page like this:

so how to fix that to make it the same in all pages

and how to make categories with multilevels work in small screen like categories with multilevels with hover because I don’t use data-toggle=“dropdown” with hover to make user can choose any category from dropdown to get the products that belongs to the category and thank you very much

<style>
@media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
      border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
        
    }


    .dropdown-menu .dropdown-menu{
      margin-left:0; margin-right: 0;
    }

    .dropdown-menu li{
      position: relative;
    }
    .nav-item .submenu{ 
      display: none;
      position: absolute;
      left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
      right:100%; left:auto;
    }

    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
      display: block;
    
    }
    .navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 
  }
</style>

<script>
  $(document).ready(function() {
        $(document).on('click', '.dropdown-menu', function (e) {
          e.stopPropagation();
        });
        if ($(window).width() < 992) {
          $('.dropdown-menu a').click(function(e){
            e.preventDefault();
              if($(this).next('.submenu').length){
                $(this).next('.submenu').toggle();
              }
              $('.dropdown').on('hide.bs.dropdown', function () {
                $(this).find('.submenu').hide();
             })
          });
        }
    });

</script>

Too many questions :slight_smile:

It sounds like you need to hire a developer to code the site for you as all your screenshots above show that there is a lack of understanding about responsive design. There is no easy fix as it will include building those elements in a way that can adapt to the screen size properly.

If you have a link to the live site we can maybe tackle one issue at a time but most of your problems will stem from overflowing content. You must make sure that everything fits inside its container as it’s clear that your table and your form element do not fit in the allocated space and will break the design.

The sticky out form element should be easy to fix as you probably have a hard coded a width on it when it should be fluid or the same size as those other elements in the form.

Your first photo of the table overflowing is again showing that the table is too big to fit on a small screen and there is no easy fix I’m afraid. You could create a wrapper around the table and allow that wrapper to scroll (width:100%;overflow:auto) so you can scroll the table sideways inside the wrapper. If you want to get fancy you can add sticky columns but this is quite complex.

Alternatively completely recode the table and linearise the content with media queries for small screen display. This is not a 5 minute task as you need to add the data attributes into the cells to mimic the headings.

Its probably easier looking at your screenshot to try and overflow:auto to the wrapper of the table but it all depends on how your code is set up.

It looks like you should be reducing the size of the search input based on screen width to allow more room for other elements.

If you are trying to turn your dropdown hover menu into a click menu for small screen then that approach won’t work. For a start it doesn’t listen to page resize so will only work if the screen is at that size before you start. Someone on a desktop who resizes smaller will not activate the click menu and vice versa someone who starts small and resizes large will get the click handler at all times even on large screen.

You’d need to tie the routine into a resize eventListener or better still use matchMedia to match the css media queries instead. Make sure that you only style hover styles for larger screen otherwise that will interfere with the click action on smaller screens.

As I said you’ve posted too many questions that would require a considerable amount of time to fix but if you can show a live example of the page then we can look at one issue at a time. Start with the overflowing form element as that should be an easy fix if we can see it in action or you can create a demo of it.:slight_smile:

1 Like