Agfdhyk

I had a site that was running for a year or so without any issues. It is an affiliate site and I was not making any money so I turned it off. I started it back up today and the entire layout is compressed into a single column. I found the issue, the elements are wrapped in a Div with a width set by the browser. If I modify the HTML in the browser and remove the div everything looks as it is supposed to.

When I go to my code, it turns out the div is the div I have to wrap my JSX code in. I can't remove it. Does anyone know how to resolve this? The website is http://www.thequickreviews.com/ (the site is on free hosting and may take 15 seconds to load) and if you look in dev tools for "this-div-is-narrow" you can see the div responsible.

The code in is:

render() {

        const sortedArray = categoryArray.sort(function (a, b) {

            var textA = a.categoryName.toUpperCase();

            var textB = b.categoryName.toUpperCase();

            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;

        });

        const productsListed = sortedArray.map(category => {

            return (

                    <Col xs={12} sm={4} md={4} lg={3} key={category.id}>

                        <Link onClick={this.goToTop.bind(this)} to={category.link}>

                            <div class="image-container">

                                <div className="full-width">

                                <Image className="images" onError={this.displayError.bind(this)} responsive src={category.image} alt={category.altTag} />

                                </div>

                                <div className="winners">

                                    <div className="placement">

                                        <div className="inner-container">

                                            <div className="category-text">{category.categoryName}</div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </Link>

                    </Col>

            )

        });

        return (

            <div class="this-div-is-narrow">

                <MetaTags>

                    <title>The Quick Reviews</title>

                    <meta id="meta-description" name="description" content="We make your buying decisions quick and easy by displaying and rating popular products in each category" />

                </MetaTags>

                {productsListed}

            </div>

        )

    }

You'll have to add row class to this-div-is-narrow

Like so:

<div class="row">

    <MetaTags>

        <title>The Quick Reviews</title>

        <meta id="meta-description" name="description" content="We make your buying decisions quick and easy by displaying and rating popular products in each category" />

    </MetaTags>

    {productsListed}

</div>