Home Forums Pro Themes Musicsong Pro How can I adjust the cropping of an image in the Home Page/Slider?

Viewing 10 posts - 31 through 40 (of 40 total)
  • Author
    Posts
  • #191246
    Psink
    Keymaster

    This CSS is responsible for the issue

    #masthead .wrapper {
    position: relative;
    left: -138px;
    margin-right: 298px;
    padding-right: 5px;
    -webkit-transform: translatex(0px) translatey(0px);
    -ms-transform: translatex(0px) translatey(0px);
    transform: translatex(0px) translatey(0px);
    }

    You can remove this css from your site where ever you did add before

    #191251
    bassinla
    Participant

    Psink: thanks for responding. I don’t see the “masthead.wrapper” code you quote anywhere in my CSS code. I’ve copied the entire code below. Do you see it there?
    David

    CURRENT CSS CODE:
    #page-site-header {
    background-position: top !important; }

    .featured-slider .slick-track article{
    background-position: top;
    }

    #page-site-header {
    padding: 300px 0;
    text-align: center;
    position: relative;
    background-color: #333;
    background-size: inherit;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    background-color: #000;
    background-repeat: no-repeat;
    }

    #main-slider .container {
    display: none;
    }

    .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background-color: #000 !important;
    color: #FFF !important;

    .featured-slider article {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;

    }
    #page-site-header {
    background-position: top;
    }

    {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% !important;
    }

    strong {
    color:#FFF !important;
    }
    .home .wrapper .entry-container .entry-header a{
    display: none;
    }

    .button {
    background-color:#0b04e0;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    }
    .button:hover {
    background-color:#5cbf2a;
    }
    .button:active {
    position:relative;
    top:1px;
    }
    #wpcomm .wc-comment-right .wc-comment-text * {
    color: #ccc !important;
    }
    .wpforms-confirmation-container-full {
    background: #2980b9;
    color: #ffffff !important;
    border-color: #ecf0f1;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 1px;
    padding: 2rem;
    }
    .wpforms-confirmation-container-full p {
    color: #fff !important;
    margin-bottom: 0;
    font-size: 1.1em;
    }
    div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: rgb(255 11 11) !important;
    font-size:13px;
    }
    #wpforms-1378-field_54 p {
    font-size: 13px;
    line-height: 16px;
    }
    #wpforms-1378-field_54-container {
    padding: 0px 0px 15px 0px;
    }
    select#wpforms-1378-field_51, #wpforms-1378-field_54 {
    display: none;
    }
    #masthead .wrapper {
    left: 16px !important;
    }
    @supports (-webkit-touch-callout: none) {
    @media screen and (max-width: 1024px) {
    #masthead .wrapper {
    left: 260px !important;
    top: 28px;
    }
    }

    }

    #191278
    Psink
    Keymaster

    You can add this CSS to override previous CSS

    #masthead .wrapper {
    position: relative;
    left: auto !important;
    margin-right: auto !important;
    }

    #191285
    bassinla
    Participant

    Psink: I inserted that CSS and I now can see the menu on a mobile device again, which is great, but the featured image on a mobile device is still way too big for my phone’s display. Is there a fix for that?

    I assumed the theme would automatically resize contents for different platforms. Is that not the case? Should I be using a jpg of a different size for a featured image?

    Thanks.
    David

    #191289
    Psink
    Keymaster

    You can try this CSS

    #page-site-header{
    background-size: cover;
    }

    Hope this helps

    #191292
    bassinla
    Participant

    Psink: that didn’t seem to affect the size of the featured image on my phone. It’s still way too big.

    Doesn’t the theme have a way of automatically resizing for mobile devices?

    Thanks.
    David

    #191294
    Psink
    Keymaster

    I see the height of the banner is pre-defined and that is 100vh both for larger and smaller screens. I made little changes in the CSS for small device I made height half 50vh

    #page-site-header{
    background-size: cover !important;
    }

    @media screen and (max-width: 600px) {
    #page-site-header{
    height: 60vh !important;
    }
    }

    here is the screen record how it looks
    https://www.awesomescreenshot.com/video/22081128?key=da0e8c60fc45fde62e42634817891ae4

    and you can adjust height as per your need

    #191296
    bassinla
    Participant

    Psink: I just realized, after looking at your screenshot, that we might be referring to different placements of the image. I’m referring to when you click in the main menu: “TICKETS AND RESERVATIONS FOR THE NOVEMBER 19 SUNDAY JAZZ SALON: THE ULYSSES OWENS, JR. QUARTET!”. When it goes to that page, it looks fine on my desktop, but what you did below didn’t change how it looks on my iPhone 12. I took a screenshot, but I don’t know how to upload it here.

    Are you able to test it on a phone?

    Thanks for continuing to try and get this fixed.
    David

    #191298
    Psink
    Keymaster

    You can share image from this site
    https://imgbb.com/

    you can simply share the link of image generated by that site

    #191301
    bassinla
    Participant

    Psink: here is the screenshot: https://ibb.co/8jKXJDQ

    Thanks.
    David

Viewing 10 posts - 31 through 40 (of 40 total)
  • You must be logged in to reply to this topic.