Jump to content

Archived

This topic is now archived and is closed to further replies.

sglanville

space between the post and images in magazine mode

Recommended Posts

sglanville    0
sglanville

Please see the attached example of what I would like the magazine mode to look like. Can you provide the css code to remove the space between the posts in magazine mode. I simply cannot find it. Are the images based on the first image in the post or the feature image. Please advise - thanks again for your help.

 

Sharon 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi, Can you provide a link to your site please. Also please be aware that we do not provide assistance with extensive custom CSS. We recommend using Google Chromes web dev tools to inspect your element and find the correct classes to create your custom CSS.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sglanville    0
sglanville

Hi again,

 

I have tried removing the spacing between the post in the magazine layout and cannot figure it.  I've attached an image of the magazine layout of my site and an image of how I would like it to look.  Any direction would be appreciated. Thanks again.

 

The site is in development and cannot be at this time. 

 

[sharedmedia=core:attachments:1622]

 

 

   remove-spacing.jpg

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Without a link to the site we are flying blind and not able to provide help with the specific code. 

 

You can inspect the elements using firebug or your browser inspection tools and remove the padding that way as Danny suggested previously. 

 

There is a guide to Overriding the default CSS here http://docs.pagelines.com/customize/overriding-default-css 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Audun MB
      By Audun MB+
      The media selector for sections uses full size images, you can't choose to use smaller file sizes. That means that sections are huge in file size. So for a box image in Boxes which will never be wider than 500 px, Pagelines choose full image size, even if it is a 2 mb photo. 
      Adding alt and title text to the images would also be good.
      I'd prefer to use the default setup by WP, which has all the options we need.
      For now I have to use this plugin as a workaround, by selecting the best size and add it in the url field.
    • jeomiland
      By jeomiland+
      Hi guys
      I saw discussion back in 2013 about ibox/icon/image size. Here's another question.
      Have a client who wishes to have iboxs displaying several product categories in a shopping store, then under that, a couple more boxes - with clickable images - with DIFFERENT ASPECT RATIOS!!! from the iboxes used above.
      see  http://ecoluxhomeproducts.com/storedev/dev/ (site under development so may look different when you visit)
      So is iBox the only section that has clickable images AND some sort of text describing the action you wish to take? And how control aspect ratio of the media display box? Client want's the 2 down below (Designer Collections and Blog) to be longer, landscape.  I know I can code it up in HTML or PHP, but the idea is to make it simple for client to change the images AND the text AND the url the link goes to.
      So any ideas what's the best section to accomplish this? And how control aspect ratio (those 2 images are actually landscape dimensions.)
      Thanks
      JE
    • kwp4petar
      By kwp4petar
      I have been trying so many different options on the forums and nothing's working for me.  On one site (most recent one i'm working on), I can change the size of the navigation bar at the top with no problem at all.  However, when I try using Simple Navi (Full Width) on another site, nothing works.  All I want is the logo to be larger (be it by changing the size of the container or the image div itself). I think my biggest issue is not knowing exactly what I need to direct my css changes to.  I am also trying to change the background of the bar.  I don't want any background. 100% transparent background.  I've tried using 'background-color: transparent;' but that hasn't had any effect so far.  I also tried using a 1% (as well as a 50%) transparent solid color image from photoshop to set it as the background, but that didn't work either.
       
      So here's the long story short of what I want:
       
      1. What's the easiest way to find the exact name of the object(would 'div' be a more correct term?) I am making changes to in css? (i've tried using Chrome's 'Inspect Element' but that doesn't always work)
         
          ex: How do people know to do '.section-navi img { .... }'
       
      2. How do I change the size of the logo being used in Simple Navi (full-width)?
       
      3. How can I make the navbar have either slightly transparent solid colored background, or no background at all (100% transparent).
    • selmakdesign
      By selmakdesign
      Hello,
       
      I'm having major problems reducing the padding in the DMS2 elements such as the canvas, textbox and header. Without custom css there is a generous amount of space at the top and bottom of these elements and typing border: 0px in the front end editor makes no difference.
       
       
       
      So I've typed in the following into custom css:

      [codesyntax].header-padding .pl-area-wrap { /*change the padding in the fixed heading. To activate add "no-padding" class to front end element!*/
      padding:10px 0 0 0 !important;
      }
      .no-padding .pl-section-pad { /*remove top and bottom padding of selected text boxes. To activate add "no-padding" class to front end element!*/
      padding:0px !important;
      }[/codesyntax]
       

       
      But here's the issue: now a white border underneath the footer has appeared! Even though it's only supposed to affect the items with the custom class added to them. 
       
      The white border is visible in larger screen sizes, for example 24"
       

       
      I removed the css class from the footer canvas to see if that's causing it but it makes no difference. The only way not to get this white space so far is by not customizing the padding!
       
      Some help please !!
    • espitia
      By espitia
      Hello, I'm trying to have the images (featured images) from the Flipper be thumbnail. I set that as the option but still shows large images. You can check out the site at http://casamotif.com. It is under the big splash image on the home page.
       
      Thanks in advance.
×