WordPress Page Isn’t Aligning Anymore

  • Resolved trey03

    (@trey03)


    8 years ago

    [ Moderator note: title adjusted, please refrain from using help, urgent, emergency, asap, etc. in topic titles. ]

    Hi, I’ve never asked for help with WordPress issues before but I’m in such a rough spot right now and I know someone out there can help me. I use the Shopify Buy button to display products on my WordPress site. I’ve already installed Shopify’s WordPress Plugin to work with the buy button. When I added products into WordPress pages (using Shopify’s “Add Product” button), the products weren’t aligned properly on the page.

    After spending countless hours trying to solve this alignment issue, I ended up finding a piece of code that allowed me to align my imported products properly. Then I entered these lines of code in the WordPress text editor. Here is an example:

    <div style=”width: 46%; padding: 0 10px 0 0; float: right;”>[Shopify’s embed code 1][ Shopify’s embed code 2]</div>
    <div style=”width: 46%; padding: 0 10px 0 0; float: right;”> [Shopify’s embed code 3][ Shopify’s embed code 4]</div>

    Each set of brackets contains an embed code created by Shopify, which represents each product. When I used this piece of code one after the other, I was able to show products in 4 columns on my desktop site and 2 columns on mobile site. This is exactly how I wanted my products to be displayed.

    Then, I installed an app in Shopify and the app somehow ruined the layout on my WordPress page. I actually felt paralyzed by this discovery because I poured so much of my energy and time into solving this one problem and ONE APP did something that changed my layout. Now I have 2 columns showing on my pages with huge blank spaces in between. The strangest thing about all of this is that the code that I used in the text editor did not change at all. However, the page layout is displaying differently. That means something else was changed and I don’t know what it is. Here is a picture of what the layout looks like now:

    https://bricwear.com/wp-content/uploads/2016/11/Layout.jpg

    Now I am reaching out to any WordPress expert who can help me solve this problem. I’m so confused and discouraged because I don’t know what step to take to revert back to page’s original layout before I installed the app. If further clarification is need, then please let me know. Thank you in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The developers and users of this theme/plugin would be the best people to ask. You can reach them here:

    https://www.ads-software.com/support/plugin/shopify-ecommerce-shopping-cart

    Moondrop

    (@moondrop)

    Can you provide a link to the page with the problem? This is a CSS issue most likely caused the by floats you added. If you can edit the CSS, the issue is, you need to clearfix or set overflow:hidden; on the parent html container.

    • This reply was modified 8 years ago by Moondrop.
    Thread Starter trey03

    (@trey03)

    Hi moondrop, thank you for the speedy response. I can definitely provide you with a link. Here is the link: https://bricwear.com/new-additions

    Moondrop

    (@moondrop)

    Hi trey03, update your code to this (it wraps your floated divs in a clearfix)

    <div class="clearfix">
	<div style=”width: 46%; padding: 0 10px 0 0; float: right;”>[Shopify’s embed code 1][ Shopify’s embed code 2]</div>
	<div style=”width: 46%; padding: 0 10px 0 0; float: right;”> [Shopify’s embed code 3][ Shopify’s embed code 4]</div>
</div> <!-- clearfix -->
    Thread Starter trey03

    (@trey03)

    Hi moondrop, your solution almost worked. I wanted to create 4 columns on the desktop site but there is only two columns showing. So I tried duplicating the code and still no luck. I will see if I can find a plugin that can help me. Please notify me if you have more suggestions. Thank you

    Thread Starter trey03

    (@trey03)

    I actually found a plugin that works really well. However, I still need to deal with lots of code. I’m okay with that because I just wanted to create the 4 columns I previously had. Once again, thank you moondrop for your suggestion. Also, thank you Steve for offering another forum.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WordPress Page Isn’t Aligning Anymore’ is closed to new replies.