Image CSS Customization

• 

  vlogazul · Member · Jan 29, 2016 at 5:45 am

  • Copy link
  • Add topic to favorites

  I am using the Mixfolio theme and I would like to know if there’s a snippet for the following.

  If you click on my most recent post, you will see that the image of the article to the right side is not aligned with the article text, the image is a bit shorter since i used the justify alignment for the text. Is there a snippet to make that image be aligned width wise with the summary text? that snippet to work with all the posts not just that one. Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 29, 2016 at 7:26 am

  • Copy link

  Hi, the available width for the content area on Mixfolio is 637px, and that is the minimum width recommended for featured images. The image in your latest post is only 600px wide. WordPress and the theme software will not enlarge a photo that is not wide enough for the content area because the image would lose quality. Edit that image in your image editing program on your computer and make it at least 637px wide and then upload that image and replace the existing featured image with it.

• 

  vlogazul · Member · Jan 31, 2016 at 9:02 am

  • Copy link

  Thanks for the clarification, with that being said. What about changing that body text width of the article lets say to 597 px. Would there be a snippet for that?

• 

  thesacredpath · Member · Feb 1, 2016 at 8:34 pm

  • Copy link

  You can use this which targets that page.

  .postid-15341 .entry-content {
      max-width: 597px;
  }
  .postid-15341 .entry-content img {
      max-width: 100%;
  }

• 

  vlogazul · Member · Feb 1, 2016 at 9:30 pm

  • Copy link

  It works perfectly, thanks. And how do you target all of the posts and not just .postid-15341? so that all posts have that same width.

• 

  thesacredpath · Member · Feb 2, 2016 at 2:32 am

  • Copy link

  Super. modify the CSS selectors so they looks like this.
  .single .entry-content {
  max-width: 597px;
  }
  .single .entry-content img {
  max-width: 100%;
  }`

• 

  vlogazul · Member · Feb 4, 2016 at 12:29 am

  • Copy link

  It worked perfectly, thanks. Would there be a snippet to hide the secondary menu on the main page on any mobile device? so that i can see it on a computer but not a mobile device, thanks.

• 

  thesacredpath · Member · Feb 4, 2016 at 7:35 am

  • Copy link

  We can limit using a media query with a max-width, but the problem is, what are you going to define as a width for “mobile”. Do you want to include tablets? If so, you would probably have to limit things to a max-width of 1024px (iPad in landscape). The problem is, if someone has their computer browser window at less that 1024px wide, the menu would be hidden from them as well.

  There really isn’t a reliable way to detect handheld devices and I read that the iPhone will ignore handheld media queries, and it could be that others do as well. Last I heard, there were 99 different “viewports” for mobile (phones and tablets), but that has probably been a year ago. There may be more.

• 

  vlogazul · Member · Feb 5, 2016 at 5:15 am

  • Copy link

  I see what you mean and is better off to leave it the way it is thanks. Is there a snippet for the following!

  On the main page there’s a black button to the right that says “contacto” is there a snippet to change that text of “contacto” to a text of my choice?

• 

  vlogazul · Member · Feb 5, 2016 at 8:37 am

  • Copy link

  I was able to figure out about the button but instead would there be a snippet to change the text color of the links in the secondary menu?

• 

  thesacredpath · Member · Feb 5, 2016 at 9:34 pm

  • Copy link

  For the text color on secondary menu.

  .breadcrumb a {
      color: #cc0000;
  }

• 

  vlogazul · Member · Feb 11, 2016 at 4:06 am

  • Copy link

  It works perfectly, thanks. Would there be a snippet to change the positioning of the sub header images that are on top of the secondary menu and to put that sub header all the way at the bottom in between the featured image posts and the colophon?

• 

  thesacredpath · Member · Feb 11, 2016 at 7:17 am

  • Copy link

  Moving things to different location on responsive width themes is usually complex and messy, but this time it worked pretty cleanly. There is sort of a wide gap between the bottom of the content and the relocated section, but that is needed to keep them from overlaying the titles at the bottom of the last images on smaller screens.

  .home #main #content .row {
      position: absolute;
      bottom: 0;
  }
  .home #main #content {
      padding-bottom: 220px;
  }

• 

  vlogazul · Member · Feb 12, 2016 at 8:29 am

  • Copy link

  It works awesome thanks. In that same secondary section I now added a second picture, the one with blue text. would there a snippet to make that particular picture be between the featured images and the colophon but only for that one and for the other image that is the first to stay on the same position as it is right now?

• 

  thesacredpath · Member · Feb 12, 2016 at 8:49 am

  • Copy link

  We can use the nth-child pseudo class to move the second image down to the bottom. I’ve also use a “calc” on the width so that it will not be cut off when viewed on a mobile.

  .home #main #content .row .subheader img:nth-child(2n) {
      bottom: 0;
      position: absolute;
      right: 0;
      left: 0;
      margin-left: 20px;
      margin-right: 20px;
      width: calc(100% - 50px);
  }
  .home #main {
      position: relative;
  }
  .home #main #content {
      padding-bottom: 120px;
  }
  .row .twelve.columns {
      position: inherit;
  }