Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 4, 2020 at 9:00 pm #1235211
    greentim

    Hello.
    Here is a link to the website I’m working.

    Homepage

    I have three things I need to adjust for mobile only and I’m not sure how.
    1. The social media icons won’t show up on mobile. They should be in the top black bar.
    2. I need “Paul Marshall Writes” that is in blue at the top to be centered.
    3. I need the black and white photo of the man a little larger on mobile. The photo that is in the black bar under the “Meet Paul” button.

    Thank you!
    Kristin

    August 6, 2020 at 7:37 am #1235605
    Rikard

    Hey Kristin,

    1 and 2, please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
#header_meta ul.social_bookmarks a {
    color: #0faee3 !important;
}
span.logo {
    width: 100%;
}
}

    3. It will be difficult to adjust that using CSS, so maybe you want to hide the slider for mobile screens and use a Color Section element instead with the image as a background? If so then you can set the Color Section to not show on mobile in the element options, and we can give you CSS to hide the slider on mobile.

    Best regards,
    Rikard

    August 6, 2020 at 4:17 pm #1235789
    greentim
    This reply has been marked as private.
    August 8, 2020 at 4:24 am #1236168
    Rikard

    Hi,

    Thanks for that. I’ve adjusted the CSS a bit and it’s applying now, please review your site.

    Best regards,
    Rikard

    August 10, 2020 at 5:41 pm #1236472
    greentim

    Hi and thank you. I do see the updates. Please see my comments below

    For Mobile:
    1. The social media icons are cut off and I would like them a little larger if possible.

    2. The blue text at the top that says “Paul Marshall Writes” is centered now , but it’s too close to the button lines and there needs to be a little space above the “Paul Marshall Writes.”

    3. A new request would be how can we get the listing on the homepage to show the copy first and then the photo? Right now you see the Love & Stardust book and then the excerpt. We would like all three listings to be excerpt first and then image – only on mobile.

    Much thanks for all your help and expertise!
    Kristin

    August 11, 2020 at 8:53 am #1236617
    Rikard

    Hi Kristin,

    1 and 2, please try this in Quick CSS:

    @media only screen and (max-width: 767px) {
.responsive.html_top_nav_header #top .social_bookmarks {
    margin-top: 0;
}
.responsive.html_top_nav_header #top .social_bookmarks a:before {
    font-size: 16px;
}
.av-burger-menu-main {
    margin-top: -15px;
}
}

    3. I couldn’t find a solution for that unfortunately, but if you reply to this thread after you get this message then another moderator can have a look at it.

    Best regards,
    Rikard

    August 11, 2020 at 6:59 pm #1236727
    greentim

    Thank you 1 and 2 worked!

    I just need to know about 3.
    3. How can we get the listings on the Homepage and TheBook page to show the copy first and then the photo? Right now you see the Love & Stardust book and then the excerpt. We would like the listings to be excerpt first and then image – only on mobile.

    August 16, 2020 at 10:18 pm #1238281
    Mike

    Hi,
    Sorry for the late reply and thanks for the login to your test site, so on the homepage & “the book” page I added custom ID’s to the image column and the text column, the ID’s used is copy & cover.
    Then I added this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
  ?>
  <script>
  (function($){
  $(document).ready(function () {
  	if ($(window).width() <= 766) {
$( '#main' ).each(function() {
$( this ).find( '#cover' ).insertAfter( $(this).find('#copy') );
});
} else {
	$( this ).find( '#copy' ).insertAfter( $(this).find('#cover') );
}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

    now for mobile the text will show first.
    Please clear your browser cache and check.
    Please note that if you check with a resized desktop browser you will need to reload the page at the new size for the script to work. This will not be an issue for and actual mobile device.

    Best regards,
    Mike

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