Forum Replies Created
-
Posts
-
Psink: here is the screenshot: https://ibb.co/8jKXJDQ
Thanks.
DavidPsink: 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.
DavidPsink: 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.
DavidPsink: 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.
DavidPsink: 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?
DavidCURRENT 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;
}
}}
You helped me resize the featured image and slider image so they look good on my desktop, but now I realize I have an issue with display on a mobile device. I have four pages on the main menu. All display acceptably on a mobile device, except the last one you helped me with, https://jazzsalon.org/tickets-and-reservations-for-the-november-19-sunday-jazz-salon-the-ulysses-owens-jr-quartet/. When that page displays on a mobile device, the featured image is way oversize, so you see hardly any of it, and the menu disappears from the upper righthand corner, where it shows on all the other pages.
Can you help me fix these two issues?
Thank you!
DavidPsink wrote:
@BASSINLA, You can add this CSS for the slider.featured-slider .slick-track article{
background-position: top;
}And for featured image add this CSS
#page-site-header {
background-position: top !important; }Hope this helps
REPLY:
Psink: this fixed the slider problem, but it did not fix the featured image problem. It moved the featured image higher in the frame, but I didn’t need it to be moved higher, I needed it to be made larger, and still be in the center.How can I center the featured image, but have it appear larger, so it fills more of the screen?
Thank you!
DavidPSink: I increased the height, but it didn’t change the size of the image, only of the black box the image was in.
How can I make the image, itself, larger?
Also, this image is the second image in the slider and you can see how it’s way oversize. How can I resize the image in the slider so I can see all the players?
Thank you!
DavidPsink: thank you for the code you provided. What would I need to change in the CSS you provided to make the image larger, so that it fills more of the screen?
Also, this didn’t effect the size of the image in the slider, where it’s also too large.
Just for your reference, here is all the CSS code that is currently in place.
How does the CSS code you provided know to apply it only to the featured image on that one page, since none of the other featured images seemed to change?
DavidCURRENT CSS CODE:
#page-site-header {
padding: 300px 0;
text-align: center;
position: relative;
background-color: #333;
background-size: inherit;
background-position: top;
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;
}
}}
—–Original Message—–
From: Theme Palace <info@themepalace.com>
Sent: Friday, October 13, 2023 10:20 PM
To: noreply@themepalace.com
Subject: [Theme Palace] How can I adjust the cropping of an image in the Home Page/Slider?Psink wrote:
You can add this CSS
#page-site-header {
padding: 300px 0;
text-align: center;
position: relative;
background-color: #333;
background-size: inherit;
background-position: top;
background-attachment: fixed;
height: 100vh;
background-color: #000;
background-repeat: no-repeat;
}———–
You are receiving this email because you subscribed to a forum topic.
Login and visit the topic to unsubscribe from these emails.
Sanam: I’m back with the same issue: I’ve just added a new featured image for https://jazzsalon.org/tickets-and-reservations-for-the-november-19-sunday-jazz-salon-the-ulysses-owens-jr-quartet/. I also have it on the slider. In both cases, the image needs to move down slightly, so you can see the drummer’s face.
I’ve tried lowering the resolution of the photo, but it just makes the image blurrier, without changing its positioning.
I wish there were a way for me to adjust the positioning of featured images without having to bother you folks.
Thanks for you help.
DavidSanam: yes. that looks fine. Thank you for making the fixes. It sounds like there’s not an easy way for me to make the adjustments by myself. If that’s the case, I’ll just reach out to your team.
Thanks for being so prompt and helpful!
DavidSanam: I have posted a new concert at TheJazzSalon.com and have the same positioning issue with these new slider photos I had with the ones before. Is there a way I can correct each photo’s position without having to bother you each time.?
Thanks for your help.
DavidYes, the menu shows up on my phone now, Sanam. Also, I just noticed that the sax player looks great on my phone. He’s out of frame only on my desktop.
Thanks for your help.
DavidSanam: yes the issue is still there. There is no menu on my iPhone 13, and others have complained that they don’t see it on their phones, either.
Also, is it possible to lower the sax player, so we can see his face, without changing the other photos?
Thanks.
David
