WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Lining up articles and images (21 posts)

  1. takefootball
    Member
    Posted 1 year ago #

    Not sure if anyone is able to help me, but please take a look at my blog:

    http://takefootball.com/

    Under the ‘Premier League’ section, you will see two large images alongside each other. However, the images directly underneath (two on each side) and accompanying text do not line up. You will also note that the top row of these four articles also appears a little ‘squashed’.

    If you take a look at the next section ‘Football League’ and ‘Europe’, these line up perfectly.

    Does anyone know how I can fix this, please?

    I use MagMan 3.5.1

    Thanks!

  2. Ryan Yu
    Member
    Posted 1 year ago #

    Hi takefootball,

    Currently the class "block-small" (layout.css, line 1341) has the float:right. If you change this to left, the alignment will be fixed.

    However check if there is any theme option you can make this change in your dashboard. Usually themes offer some options to manage the styles.

  3. takefootball
    Member
    Posted 1 year ago #

    Hi Ryan

    Thanks a lot for your reply.

    Please excuse my ignorance, but I'm fairly useless with this sort of thing! I've been looking for layout.css, but can't find it. All I have is the following:

    emplates
    404 Template
    (404.php)
    customizer.php
    interface.php
    main.php
    options.php
    Archives
    (archive.php)
    Author Template
    (author.php)
    Comments
    (comments.php)
    main.css.php
    counter.widget.stats.php
    latest-tweets.php
    post-thumbs.php
    review.php
    shortcodes.php
    social-counter-widget.php
    style.php
    widgets.php
    Footer
    (footer.php)
    functions-pagenav.php
    Theme Functions
    (functions.php)
    Header
    (header.php)
    _list.php
    _post_info.php
    _single.php
    Main Index Template
    (index.php)
    main.js.php
    Page Template
    (page.php)
    Search Results
    (search.php)
    Single Post
    (single.php)
    Archives Page Template
    (template_archives.php)
    Contacts Page Template
    (template_contacts.php)
    Full width Page Template
    (template_full_width.php)
    timthumb.php
    Styles
    Stylesheet
    (style.css)

  4. Rajesh Soni
    Member
    Posted 1 year ago #

    Further to what Ryan suggested, modify this file: http://takefootball.com/wp-content/themes/MagMan/css/layout.css

    Find

    .block-small {
    	float: right;
    	overflow: hidden;
    	position: relative;
    	width: 100%;
    	border-bottom: 1px dashed #E1E1E1;
    	padding: 0 0 15px 0;
    	margin-bottom: 15px;
    }

    Replace with:

    .block-small {
    	float: left;
    	overflow: hidden;
    	position: relative;
    	width: 100%;
    	border-bottom: 1px dashed #E1E1E1;
    	padding: 0 0 15px 0;
    	margin-bottom: 15px;
    }
  5. takefootball
    Member
    Posted 1 year ago #

    Hi Rajesh

    Thanks for your post.

    Sorry, but I don't understand - where do I find this file on my dashboard (admin page)?

    Thanks!

  6. Rajesh Soni
    Member
    Posted 1 year ago #

    You can modify the file via FTP or from file manager (after you login to your hosting control panel).

  7. takefootball
    Member
    Posted 1 year ago #

    Thanks again for your quick reply.

    For some reason, the MagMan file you suggested does not appear on the FTP list, and nor does file manager.

    The guy who set the website up for me uploaded all the content onto the control panel, and it is still showing the previous theme (Vigilance).

    Is there no way I can do this via the dashboard?

    Thanks

  8. Rajesh Soni
    Member
    Posted 1 year ago #

    Okay, can you send a screenshot of how this folder looks in FTP / File manager? http://takefootball.com/wp-content/themes/

  9. takefootball
    Member
    Posted 1 year ago #

    Sorry Rajesh, I know you're being really helpful and I really appreciate it, but I have no idea how to do that :-(

    I don't know if this makes a difference, but my FTP client is File Zila...

  10. Ryan Yu
    Member
    Posted 1 year ago #

    Hi takefootball,

    The layout.css should be in the css folder in your theme folder (MagMan).

  11. takefootball
    Member
    Posted 1 year ago #

    Hi Ryan

    That's the problem - the blog was made for me, and all I have access to are the folders for its previous theme (vigilance), which does not have a layout.css file anyway.

    Which is why I am trying to find out if I can fix the alignment problem via my admin page (dashboard).

    Thanks

  12. Rajesh Soni
    Member
    Posted 1 year ago #

    Are you saying that you do NOT have access to the file manager (FTP) of your website?

  13. takefootball
    Member
    Posted 1 year ago #

    Hi Rajesh

    Sorry if I haven't made myself clear.

    I had a Vigilance WordPress site set up for me, including having access to my FTP files through File Zila.

    Recently, I upgraded this theme to MagMan, but I do NOT have access to the FTP files for this new theme.

    Therefore, I was hoping I could resolve the alignment issue via my dashboard.

    Is that possible at all?

    Thanks!

  14. Rajesh Soni
    Member
    Posted 1 year ago #

    Try installing this and see if you can access the active theme folder:

    http://wordpress.org/extend/plugins/wp-filemanager/

  15. takefootball
    Member
    Posted 1 year ago #

    Great, thanks again for your help,

    I'm at work at the moment, but will try this when I get home tonight.

    I'll keep you posted!

  16. takefootball
    Member
    Posted 1 year ago #

    Hi Rajesh

    That worked...sort of.

    If you have a look now: http://takefootball.com/ the images in the left hand column underneath Premier League are lined up, but not the right hand column - any idea how to fix this?

    Also, there is no 'gap' separating the top two images/articles to those two directly underneath. If you take a look at the Football League and Europe sections, for example, that looks different (and correct!).

    Again, any help you can provide on this would be most appreciated.

    Thanks!

  17. takefootball
    Member
    Posted 1 year ago #

    Sorry to bother you all with this again, but:

    1) If you have a look at my site: http://takefootball.com/ the images in the left hand column underneath Premier League are lined up, but not the right hand column - any idea how to fix this?

    2) Also, there is no 'gap' separating the top two images/articles to those two directly underneath. If you take a look at the Football League and Europe sections, for example, that looks different (and correct!).

    Any help would be appreciated!

    Thanks.

  18. Ryan Yu
    Member
    Posted 1 year ago #

    Hi takefootball,

    1) If you have a look at my site: http://takefootball.com/ the images in the left hand column underneath Premier League are lined up, but not the right hand column - any idea how to fix this?

    In layout.css, at line 1332, for .magman_homepage_1col .block-small, give width 50%.

    2) Also, there is no 'gap' separating the top two images/articles to those two directly underneath. If you take a look at the Football League and Europe sections, for example, that looks different (and correct!).

    Are you taking about the "Premier League" box? If so, I see the "Premier League" box has been coded differently to the other two boxes. For the simple solution, add the styles below in layout.css.

    #magman_homepage_1col-widget-3 .block-big { margin-bottom:20px; }

    Let me know if it worked.

  19. takefootball
    Member
    Posted 1 year ago #

    Hi Ryan

    Thanks - the images are now lined up!

    In regards to point 2), do I just paste this anywhere in layout.css, or does it need to go in a specific section?

    Thanks again for your help!

  20. Ryan Yu
    Member
    Posted 1 year ago #

    Try to add below the line 1332.

    Let me know how it went :)

  21. takefootball
    Member
    Posted 1 year ago #

    Wow, that's done it!

    Thanks a lot for your help - you've been brilliant! :-)

Topic Closed

This topic has been closed to new replies.

About this Topic