Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 14, 2014 at 2:45 am #209279
    Jagrav

    I’ve created a random quote area in the “Avia Advanced Area: using a “Text Block” within a “Color Section”. I added the Easy Random Quote plugin shortcut to the “Text Block” and added a background image to the “Color Section”. The area looks ok at full width, but doesn’t size down responsively. Is there a way I can make this work?

    January 14, 2014 at 4:43 am #209291
    Yigit

    Hey Jagrav!

    Can you post the link to your website and point out the section so we can take a look?

    Cheers!
    Yigit

    January 15, 2014 at 1:15 am #209785
    Jagrav
    This reply has been marked as private.
    January 15, 2014 at 8:23 am #209904
    Ismael

    Hi!

    You can use the theme’s Content Slider element and use it as a random quote slider. Set the Autorotation active? to yes and the Transition to Fade. Where is the yellow background of the plugin coming from? I tried to adjust it but I can’t find where the background is coming from.

    Best regards,
    Ismael

    January 16, 2014 at 12:46 am #210402
    Jagrav

    I’ll try using the random quote slider.

    The yellow background and quote signs is not from the Easy Random Quotes plugin. It’s an image that I added in the “Color Section”:

    “Custom Background Image”: quotes-background.png
    Full Size – 1030 x 180
    Center Center < Background Image Position
    No Repeat < Background Repeat (also tried stretch to fit)
    Scroll < Background Attachment
    No minimum height, use section to define height < Section Minimum Height

    I added the plugin short code [erq] in a “Text Block” that’s within the “Color Section” mentioned above.

    January 16, 2014 at 8:15 am #210533
    Ismael

    Hey!

    I see. My bad! That is why I’m having a hard time adjusting the quote plugin with the background. Please remove the background on the Color Section then add this on Quick CSS:

    #quotes {
text-align: center;
margin: 0 5%;
background: url(https://home.innerpath.com/wp-content/uploads/2014/01/quotes-background1.png) no-repeat top left;
width: 100%;
height: 180px;
padding: 60px 20px 60px 20px;
}

    Regards,
    Ismael

    January 16, 2014 at 9:56 pm #210907
    Jagrav

    I removed the background image from the Color section and added the above css to Quick CSS as you suggested. The background image is not centered and is not resizing responsively when the larger random quotes appear.

    Any ideas?

    * FYI: I previously placed the following styles in the enfold-child/style.css file to style the quotes and author:

    /* START Easy Random Quotes plugin section */

/* jv: investigate > For Developers: Section ID > id="section-quotes" later.
#section-quotes {
	background-color: #bbff00;
}
*/

#quotes {
	text-align: center;
	margin: 0 5%;
}

/* jv: Formats quote */
p.quotes-caption {
	margin: 0 0;
	font-size: 1.25em;
	line-height: 1.3em;
	color: #0f75bc;
}

/* jv: Formats quote signature under quote */
p.quotes-signature {
	margin: 5px 0 0 0;
	font-size: 1.15em;
	line-height: 1.3em;
	font-style: italic;
	color: #898989;
}

/* END Easy Random Quotes plugin */
    January 17, 2014 at 6:48 am #211039
    Ismael

    Hey!

    Please post the login details here and the actual background image. I will try to tweak it.

    Regards,
    Ismael

    January 17, 2014 at 8:24 pm #211354
    Jagrav
    This reply has been marked as private.
    January 17, 2014 at 8:58 pm #211365
    Jagrav
    This reply has been marked as private.
    January 20, 2014 at 9:10 pm #212423
    Devin

    Hi!

    Where are you having issues with the quote area now? Looking at it live and testing out its responsiveness it looks like its working well.

    Best regards,
    Devin

    January 21, 2014 at 2:30 am #212557
    Jagrav

    Thanks for responding :)

    /homepage/home-v9-ip-home/

    When you resize the page when the quote area has a 2 line quote the background image doesn’t stretch horizontally and vertically. The result is that the quote ends up popping out the bottom.

    Quote section full width:
    Quote background image full width

    Quote section small width:
    Quote background image small width

    Do you see what I mean?

    • This reply was modified 10 years, 10 months ago by Jagrav.
    January 22, 2014 at 9:44 am #213208
    Dude

    Hi!

    I suggest to upload a different background image in this case. Your current image shows two quote icons: http://home.innerpath.com/wp-content/uploads/2014/01/quotes-background-1300×200.png and imo it’s not possible to show both quotes for all screen resolutions. The only solution would be to use this code

    
#quotes {
background-size: contain;
}

    but then the image position looks weird on smaller screens. I suggest to draw the quote box with css (don’t use an image but just set a bg color for the entire box) and then insert the quote icon (small image which just contains the icon) with a background-image attribute and use “no-repeat top left”.

    Cheers!
    Peter

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Responsive random quote section’ is closed to new replies.