Drupal bootstrap site is not responsive when resizing

[newcoder1010]

Hi,

I am using drupal7/bootstrap. When I visit the page (mainly home) in laptop or desktop, page looks responsive. When I resize the screen. Page is not being responsive automatically. I have to refresh the page manually to see the responsive page.

Please advise.

http://webuyhousesinnova.com/

[dsonesuk]

If styled with fixed width, applied with JavaScript, you would have to use resize() to resize to new fixed width OR force a reload of page, styled with css, media queries should adjust if media size range allowed for that specific width.

[newcoder1010]

I am sorry. I am not able to understand you.

 

My custom css file looks like this

CSS CODE
CSS CODE

@media (min-width: 992px)  {

CSS CODE
}

@media only screen and (max-width: 768px){ 
CSS CODE
}

@media (min-width: 768px) and (max-width: 992px){ 
CSS CODE
}

If I choose the 2nd option "force a reload of page, styled with css, media queries should adjust if media size range allowed for that specific width."

 

Are you saying I should write some code in my css file? Can you please clarify?

[dsonesuk]

You have same problem as, someone else, any element with class 'row' not within a parent element using any of the container classes 'container', 'container-fluid' will cause scrollbars to appear because of -15px left and right margins.

 

Your design is all over the place?, like i said the slideshow images parent divs have FIXED width and therefore not responsive, the inline styling applied using JavaScript I.E slideshow coding that controls how parent div along with image, is positioned, its width, height, z-index settings, so when you resize browser, these width remain AS IS. BUT! normally this is fixed by using JS to detect resizing event happening and resize the parent elements accordingly.

[newcoder1010]

My slideshow block:

 #block-views-slideshowv-block

Parent class:

Very-Top2 

Parent css:

 

.Very-Top2 {    display: block;    margin-bottom: 10px;}

I do not see fixed width for the above parent. I have spent whole lot of time. If you could please, help me with the css code. It seems to me entire site is responsive except the slideshow. Slideshow is also responsive except the height.

[dsonesuk]

If you look at the page using web developement tools F12, you will see it updating from display none to display block as it loops through each slide, along with this is the other stylings mentioned. I have been to drupal website to see latest demo version, and it too has a slideshow problem, that shows the slideshow positioned 50% to right, I used the chat feature and pointed out this problem, saying it was mentioned here, and in google searches about Drupal slideshow problems, she/he said that they was going to contact the tech team to look into this, the demo seems to been replaced with older Drupal version, which is non HTML5 now.

[newcoder1010]

When I inspect, I clicked "#views_slideshow_cycle_div_slideshowv-block_2" which showed me below css. I changed none to block. I still have the same issue. Can you please help?

element.style {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    z-index: 4;
    opacity: 1;

}

[dsonesuk]

THIS IS NOT A CSS ISSUE, Its the slideshow coding issue which applies the css that does not allow for resizing of browser window.

 

TRY

$(window).resize(function() {
                window.setTimeout('location.reload()', 100);
            });

BUT! I am not guaranteeing anything! Drupal is the crud company who came up with this crud slideshow, go to their forum.