Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • September 5, 2017 at 7:23 am #847982
    dvus4l

    Hello!

    I am currently building this site –

    I am looking for (when adding the blog posts option for the home page) to have the image on the left and the blog excerpt + read more link on the right side (and vertically centered if possible)

    Below I have 2 images – the first is what I am currently seeing, and the second is what I have photoshopped on how I envision the end result

    Thank you in advance!

    how it currently looks

    how I would like it to look

    September 5, 2017 at 7:50 pm #848303
    Yigit

    Hey,

    Can you please post password of the page as well? :)

    Best regards,
    Yigit

    September 6, 2017 at 6:27 pm #848795
    dvus4l

    The password is in private

    September 7, 2017 at 11:44 am #849049
    Victoria

    Hi dvus4l,

    Have you tried different settings here
    https://cl.ly/3J0X0M1u3Y1k ?

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    September 14, 2017 at 10:10 pm #852317
    dvus4l

    Hi Victoria,

    I have attempted making adjustments on that page – nothing with the option of what I have described / presented.

    The login information is in private –

    Thank you in advance

    September 16, 2017 at 9:56 pm #852952
    Mike

    Hi,
    Sorry, but this would require exstive customization to work, If you really want this try hiring a freelancer.
    While the image and content can be lined up side by side, the read more button is a part of the content div so it can’t be centered across all devices with just css. The template should be re-written so the image will fit better with the content.
    2017-09-16_155007

    div.big-preview {display: inline-block !important; float: left; width: 300px !important; padding-right: 10px;}
div.entry-content {display: inline-block !important; float: right; width: 300px !important; padding-left: 10px;}

    Wish I could have been more help.

    Best regards,
    Mike

    September 18, 2017 at 7:48 pm #853552
    dvus4l

    Thanks Mike –

    For additional help; it seems like since the layout of the blog (title and copy) is set the way I would like already, that I should be able to have the two sit side by side horizontally, with a minor adjustment to the frame of the image (as I would like it to be more of less wide, rectangle than what exists) – could someone assist me with the code?

    I have given log in access a couple comments above in private

    Thank you in advance!

    September 21, 2017 at 11:26 am #854742
    Ismael

    Hi,

    have the two sit side by side horizontally

    Have you tried setting the “Blog Style” to “Grid Layout”? Set the “Blog Grid Columns” to 2.

    Best regards,
    Ismael

    September 22, 2017 at 6:26 pm #855490
    dvus4l

    Ismael,

    I have that setting made for the front page postings – you can see it is not the desired effect / layout I am looking for.

    Any further suggestions?

    Thank you in advance

    September 23, 2017 at 3:39 am #855668
    Ismael

    Hi,

    Are you trying to put the featured image beside the post title and content? Please set the “Blog Style” back to the previous option then add the following css codes in the Quick CSS field.

    #top .fullsize .template-blog .big-preview {
    width: 48%;
    float: left;
    margin-right: 2%;
}

    Best regards,
    Ismael

    September 25, 2017 at 6:02 pm #856638
    dvus4l

    Hi Ismael,

    We’re getting closer – is there a way to get the title above the copy on the right side as well, in addition to the featured image being bigger?

    Thank you in advance

    September 27, 2017 at 4:30 am #857242
    Ismael

    Hi,

    Please add the following css codes.

    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
    width: 48%;
    float: right;
    margin-top: 50px;
}

#top .fullsize .template-blog .post .entry-content-wrapper {
    max-width: 1320px;
}

#top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 1024px;
}

    Best regards,
    Ismael

    September 27, 2017 at 10:07 pm #857714
    dvus4l

    Ismael you are the man!

    Couple final questions –

    #1 – is it possible to get the featured image bigger? In addition, could I get the read more button, and the author / date information to fall under the snippet?

    #2 – It translates a bit weird on mobile – is there a solution so that the code applies to look how we’ve set it up on desktop, but to adhere to the normal way on mobile?

    Thank you in advance, you are a life saver!

    September 28, 2017 at 6:28 am #857871
    Ismael

    Hi,

    1.) Increase the width of the big-preview container.

    2.) Wrap the css codes inside a css media query.

    @media only screen and (min-width: 989px) {
/* Add your Desktop Styles here */
}

    Best regards,
    Ismael

    September 28, 2017 at 9:32 pm #858212
    dvus4l

    Ismael,

    Just curious how I go about making the big preview container larger?

    Thank you again!

    September 29, 2017 at 11:19 am #858422
    Ismael

    Hi,

    By adjusting the width value of the first css modification that we provided.

    #top .fullsize .template-blog .big-preview {
    width: 48%;
    float: left;
    margin-right: 2%;
}

    Best regards,
    Ismael

    October 2, 2017 at 11:35 pm #859430
    dvus4l

    Hi Ismael,

    I have attempted making adjustments to the above code to no avail –

    Again, I am looking to have the ‘read more’ button + the author and date to fall under the copy of the blog preview. Then to have the featured image on the side to be a bit taller ( I would assume to fit the same height as the posting)

    Any idea?

    Thank you in advance!

    October 3, 2017 at 10:27 am #859560
    Ismael

    Hi,

    Did you adjust the width value?

    Best regards,
    Ismael

    October 4, 2017 at 2:08 am #859853
    dvus4l

    Ismael

    I did – not getting the result I was looking for. Would you like access to the site?

    October 4, 2017 at 8:41 am #860006
    John Torvik

    Hi,

    Try to add the !important after the rules and check it again.

    Best regards,
    John Torvik

    October 20, 2017 at 10:26 pm #866893
    dvus4l

    Hi Ismael,

    I had wrapped the adjusted home page blog codes into the media only that you supplied, however when doing so – it adjusted everything to the point where the code was almost non existent (IE the styling looked like the default blog settings)

    Could you potentially look into this for me? I would like the adjusted codes to live on desktop, however revert back to the standard blog settings on mobile.

    Thank you in advance! I have shared the log in information in private below

    October 23, 2017 at 5:49 am #867452
    Ismael

    Hi,

    We wrapped the code inside a css media query.

    @media only screen and (min-width: 989px) {
	#top .fullsize .template-blog .big-preview {
	    width: 48% !important;
	    float: left !important;
	    margin-right: 2% !important;
	}

	.html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
	    width: 48% !important;
	    float: right !important;
	    margin-top: 50px !importatnt;
	}

	#top .fullsize .template-blog .post .entry-content-wrapper {
	    max-width: 1320px;
	}

	#top .fullsize .template-blog .post .entry-content-wrapper > * {
	    max-width: 1024px !important;
	}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.