-
Posts
-
Hello,
My problem with the ‘featured’ images is as follows:
1. I have created 2 posts pages, one entitled “Blog” and the second entitled “News”, the latter of which displays only the ‘News’ category posts.
2. Each page is identical, using the “Blog Posts” element.
3. The “Featured” images for all posts (including ‘News’) measure the same at 845 x 321 pixels.
4. However, in responsive mode (on my mobile phone), the featured images displayed on the main Blog listing page will not extend to the full width of the container. The text box beneath this does, but the image above does not.
5. Conversely, on my identical “News” page, the “Featured” images are correctly displayed at full width.
6. I have tried all of the solutions found on the pages below but nothing seems to work.
7. As both the Blog and News pages are identical, the issue would seem to lie in having assigned my Blog page as my “Blog Posts page” in “Settings > Reading”. This Blog page assignment was then repeated in “Enfold Child Theme Options” – at the top of the page – in answer to the question: “Where Do You Want To Display The Blog”. Answer: “Blog”.
8. My question, then, is why are the ‘featured’ images on the Blog page not displaying at full width in responsive mode (mobile phone)?
9. And do you have a solution for this?https://wordpress.org/support/topic/full-width-featured-images/
https://wordpress.org/support/topic/force-featured-image-to-full-width/
https://wordpress.org/support/topic/full-width-of-the-featured-image/NOT WORKING
style.css
.attachment-featured-blog-large.size-featured-blog-large.wp-post-image {
width: 100%;
}style.css
.attachment-featured-blog-large.size-featured-blog-large.wp-post-image {
width: 100%!important;
}functions.php
add_filter( ‘avf_modify_thumb_size’, ‘enfold_customization_modify_thumb_size’, 10, 1 );
function enfold_customization_modify_thumb_size( $size ) {
$size[‘entry_with_sidebar’] = array(‘width’=>845, ‘height’=>321);
$size[‘portfolio’] = array(‘width’=>495, ‘height’=>400);
return $size;
}Many thanks for your help.
Hey triton4,
Thank you for the inquiry.
You may need to remove the right padding of the image container in order to make the featured image full width on mobile view.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .big-preview.single-big { padding: 10px 0; } }Default right padding is 50px.
Best regards,
IsmaelHello Ismael,
Thank you for your quick reply.
Unfortunately, your suggested fix has not corrected the problem. Even after deactivating plugins, flushing cache, etc. the ‘featured’ images on the Blog listing page fail to extend full width in responsive mode (tablet and mobile phone).
Meanwhile, and as reported earlier, there is no problem with the ‘duplicated’ Blog page which I renamed “news-events”.
Do you have any other suggestions?
Thank you.
Solution – Problem Fixed
Hello Ismael,
The problem of the ‘featured’ images failing to extend full width on the Blog page when in responsive mode (tablet and mobile phone) would now appear to be fixed.
Please refer to Item 7 in my initial post of this problem, which I have repeated below:
7. As both the Blog and News pages are identical, the issue would seem to lie in having assigned my Blog page as my “Blog Posts page” in “Settings > Reading”. This Blog page assignment was then repeated in “Enfold Child Theme Options” – at the top of the page – in answer to the question: “Where Do You Want To Display The Blog”. Answer: “Blog”.
SOLUTION:
In fact, the problem appears to be related to a temporary “glitch” in the Enfold Child Theme Options. In exploring the issue, I created a “blank-test” page and assigned this page as the blog page in the Enfold Child Theme Options – top of the page – in answer to the question: “Where Do You Want To Display The Blog”. Answer: “blank-test”. This worked instantly, as the ‘featured’ images for my actual blog page (linked to my menu) were now displayed at full width in responsive mode (tablet and mobile phone).
However, this resulted in “blank-test” being displayed in the breadcrumbs for each post. To solve this issue, I turned off breadcrumbs in Theme Options > Header – “Hide Title and Breadcrumbs”. Although this worked, I did not want to give up the breadcrumb navigation, so I turned these back on.
I then returned to “Enfold Child Theme Options” page and – in one final attempt – changed the “Where Do You Want To Display The Blog” field back to “blog”.
This now works! No idea why, as these were the original settings. I just had to change the blog page to something else, and then switch this back to the correct blog page.
Again, I want to thank you for your quick reply to this issue.
Hi,
This now works! No idea why, as these were the original settings. I just had to change the blog page to something else, and then switch this back to the correct blog page.
Glad to know that this has been resolved. It is possible that there is a conflict with the previous blog page and one of the post categories. Do you have a post category named “blog”? Or you might have viewed a cached version of the page without the applied modifications.
Best regards,
IsmaelHello Ismael,
Thank you for your reply.
In answer to your questions:
– No, I have no post category named “blog”
– And, no, I fully cleared the cache on “everything” (computer, phone, etc.) before each fix attempt.Again, all I did was:
1. Temporarily changed the “Where Do You Want To Display The Blog” field in the Enfold Child Theme Options to a “blank” page,
2. Click the “Save all changes” button,
3. Change back to “blog” for “Where Do You Want To Display The Blog” in the Enfold Child Theme Options,
4. Click the “Save all changes” button,
5. FixedBefore doing any of the above, I first removed the css fix you suggested, as this had failed to solve the problem.
Again, I have no idea why the above action successfully solved the “featured image not full width” problem, which I had struggled with for more than a day.
Hopefully, this post will help others who encounter a similar problem.
Thanks for the follow-up!
Hi,
Thank you for sharing your experience. However, we are uncertain about the root cause of the issue. It is possible that it was a temporary glitch, but we cannot say for certain.
Best regards,
IsmaelHello Ismael,
For no apparent reason, the “featured image not full width” problem has again returned to my blog listing page.
Although temporarily assigning the blog page to a different page, this solution – which worked in the above example – no longer works for the current problem, which is the same as the above.
Again, this problem does not affect my “News and Events’ page, which is a clone of the blog page, using the same “Blog Posts” element.
I have disabled all of the plugins and flushed the cache, all with no effect. This includes the plugin, ‘Ultimate Category Excluder’.
Is there something else I can try?
Hi,
Thank you for following up.
The issue returned because of this css code.
.big-preview.single-big { padding: 0 50px 10px 0; }Did you add some css modifications recently? To override the modification above, just add this css code.
#top .big-preview.single-big { padding: 0; }Best regards,
IsmaelHello Ismael,
Your solution works!
SOLVED: “featured images not full width in responsive mode” problem. Custom css code as follows:
#top .big-preview.single-big {
padding: 0;
}Please note that the above css code did NOT work when added to:
“Appearance > Theme File Editor > Enfold Child: Stylesheet (style.css)”The custom css code worked only when added to:
“Customize > Additional CSS”In answer to your question, no, I had not performed any recent css modifications. The only custom css code added were the examples listed in my previous messages, which were quickly removed after failing to solve the problem.
Thank you so much for your invaluable assistance – and quick responses – in solving this problem!
Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘‘Featured’ Images for Posts Not Full Width on Mobile Phone (Responsive)’ is closed to new replies.