Web Analytics Made Easy -
StatCounter Help adding padding to some heavily nested elements - CodingForum

Announcement

Collapse
No announcement yet.

Help adding padding to some heavily nested elements

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help adding padding to some heavily nested elements

    I can't seem to pin point the exact element that will add padding to the image & the text and make everything look correct.

    https://www.ohiocannabis.com/

    Look at the top article entitled: MJBizdaily.com Crash Course Recap

    Notice how the image has no padding on the left?

    And text has the same issue?

    Can anyone help pinpoint the exact element just for those blocks - anything I pick seems to affect other things site wide.

    But then also doesn't it look like the title needs a bit of spacing or something too between the two lines?

    Thanks.

  • #2
    Normally we center an anchor by placing text-align:center; in the mother element, but we don't have one that don't contain other elements that are effected. So I moved the </p> up to just have the image in it. Why this didn't center the image totally is behound me, but I added a little bit to the left with margin-left:10px; in the <a>,
    Code:
    <div id="ipsLayout_mainArea">
    <a id="elContent"></a>
    <div class='cWidgetContainer ' data-role='widgetReceiver' data-orientation='horizontal' data-widgetArea='header'>
    <ul class='ipsList_reset'>
    <li class='ipsWidget ipsWidget_horizontal ipsBox' data-blockID='app_cms_Wysiwyg_i80e7dqpy' data-blockConfig="true" data-blockTitle="WYSIWYG Editor" data-controller='core.front.widgets.block'>
    <div class='ipsWidget_inner '>
    <p>
    </p>
    <p [COLOR="#FF0000"]style="text-align:center;"[/COLOR]>
    <a [COLOR="#FF0000"]style="margin-left:10px"[/COLOR] class="ipsAttachLink ipsAttachLink_left" href="https://www.ohiocannabis.com/forums/blogs/entry/19-mjbizdailycom-crash-course-recap/" rel="" style="float: left;">
    	<img alt="MMJBiz.png" 
    		class="ipsImage ipsImage_thumbnailed ipsAttachLink_image" 
    		data-fileid="133" data-unique="2w3alen97" 
    		height="314" 
    		src="https://www.ohiocannabis.com/forums/uploads/monthly_2016_09/MMJBiz.png.810b6535a46a89477a0364a2c11bc4ff.png" 
    		width="471">
    </a>
    [COLOR="#FF0000"]</p>[/COLOR]   <!-- Moved up here -->
    <span style="font-size:28px;">
    	<a href="https://www.ohiocannabis.com/forums/blogs/entry/19-mjbizdailycom-crash-course-recap/" rel="">
    	MJBizDaily.com Crash Course Recap
    </a>
    </span>
    [COLOR="#FF0000"]<!-- </p> -->
    [/COLOR]
    Also took this out because it's redundant.
    style="width: 471px; height: auto;"
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Ok so I was able to get to the source code for that block & easily add the style="margin-left:40px" and got the buffer the image needed.

      Now any ideas/suggestions on how to fix the text from crunching up against the sides?

      Comment


      • #4
        Bump for help with the text still

        Comment


        • #5
          Add padding-left and padding-right to that li element:
          Code:
          li.ipsWidget {
              padding-left: 10px;
              padding-right: 10px;
          }

          Comment


          • #6
            Hmm that didn't seem to work? I still have it in my custom.css file if you want to review it.

            Comment


            • #7
              I can see it in the developer tools and I can see also that your definition is overwritten by another one having higher priority. Try !important:
              Code:
              li.ipsWidget {
                  padding-left: 10px!important;
                  padding-right: 10px!important;
              }

              Comment


              • #8
                That worked but it is also affecting all of the other boxes.

                Any idea on how to isolate it just to the one about the conference recap?

                This software is great, but it should be more polished than it is for stuff like that. I'm surprised really.

                Comment


                • #9
                  You can isolate one box by assigning an ID to it:

                  HTML:
                  Code:
                  <li class="ipsWidget" id="your-specific-id">
                  CSS:
                  Code:
                  li.ipsWidget#your-specific-id {
                      padding-left: 10px;
                      padding-right: 10px;
                  }

                  Comment

                  Working...
                  X