Questions tagged [responsive]
The responsive tag has no usage guidance.
251
questions
0
votes
1answer
225 views
add class to all images inside the content
I have a function like this :
function add_responsive_class($content)
{
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
if (!empty($content)) {
$document = new ...
0
votes
2answers
1k views
Disable Media File Image Link On Mobile Devices
I'm looking to disable the 'media file' image link on mobile devices, so that when viewing a site on mobile devices we simply have the image being displayed with no link to anything.
I am looking to ...
1
vote
3answers
15k views
Convert WP Menu to a Drop Down for Mobile browser
I'm working on a wp project with responsive theme.
I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options ...
0
votes
4answers
32k views
All 3?: Responsive resizing of images + image width of actual image for small images + max-width for all larger images
What I'd like to achieve is to have images resize responsively – and for that I have to set 'width: 100%' – and at the same time set a maximum width to not have the image as wide as the content
To do ...
0
votes
1answer
65 views
Menu is in Reversed order
I cannot seem to figure out why this menu is in reversed order only for Mobile.
site-navbar.php
<div class="menu-container">
<div class="menu w-full mx-auto container xl:pr-16">
...
1
vote
2answers
3k views
How to exclude an image size from the Wordpress srcset
Wordpress srcset is a great feature but there are occasions when it's important to control exactly which image sizes are included in the srcset code.
For example, on one of our sites we generate a ...
8
votes
1answer
8k views
the_post_thumbnail responsive srcset not populating with custom image size
I am trying to use the new responsive images feature in Wordpress 4.4 but I keep running into a particular problem when trying to use the_post_thumbnail with a custom image size. It seems I cannot ...
1
vote
2answers
6k views
Responsive Images - Add srcset attributes to custom Images Function
When I use get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL ); wordpress automatically outputs the srcset data like these:
<img
width="1000"
height="625"
src="https://x....
0
votes
1answer
11 views
Decide how Hero image appears on mobile
I generally can google my way to an answer but I can't for the life of me figure out what this is actually called. I apologize in advance.
I have a hero image that looks great on a full-size screen. ...
0
votes
1answer
156 views
How to accept images at multiple sizes and aspect ratios and display as standardized image size / ratio?
Lets say I accept guest post submissions. On the post archive page I have the image the user uploaded with the post on the left and an excerpt of the post on the right.
Unless I programmatically ...
3
votes
1answer
9k views
Making WordPress Gallery (.gallery-item) Responsive?
Shortcode for Gallery: [gallery link="file" columns="5" size="medium"]
I’m using a 5 column gallery on an inner page of a website, obviously when the site responds down to mobile and even tablet ...
0
votes
1answer
51 views
Change Responsive Images Maximum Width of 1600px
Sorry for my English first.
Just started with responsive Images and read
https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/
So according to this post, there is a maximum ...
0
votes
1answer
542 views
How to edit embed filter for youtube video to allow responsive full width layout
Im trying to edit the suggested embed filter from wordpress.org to make youtube videos always stay 100% width inside its container div, while keeping the appropriate height dimension as needed. Is ...
1
vote
0answers
17 views
CSS: How can I show a photo beyond the template's column, but contained within the browser window? [closed]
I'm stuck with a CSS issue and hoping someone knowledgeable can help.
I have a nice responsive template that I'm trying to customize with this one tweak, but I can't figure it out. My site is a ...
1
vote
1answer
52 views
Best practice for query_posts in responsive design?
I'm working on a responsive design desktop/mobile but I have a doubt regarding PHP calls, as the hosting provider didn't like high cpu usage.
In the loop query I have something like this:
<?php
...
1
vote
0answers
378 views
ACF Wysiwyg Editor Image srcset for responsive images [closed]
I cannot find a way to generate srcset for images added inside Wysiwyg Editor field of Advanced Custom Field (ACF) plugin. Obviously, i know how to generate WordPress image srcset using:
...
0
votes
0answers
282 views
Responsive images with srcset
I know I have to use wp_get_attachment_image_srcset but I don't know how and where to put it?Any help
<picture>
<source media="(max-width: 659px)" srcset="inc/images/...
-1
votes
2answers
3k views
Responsive table on ios safari
In chrome, firefox everything is fine.
On mobile ios safari it looks like the pic. The columns won't collapse into rows.
Tried the guide but didn't seem to work
https://css-tricks.com/accessible-...
0
votes
1answer
34 views
How can I hide/show text only for mobile users?
I have text content on a page that leads to too much scrolling on mobile devices. I'd prefer to avoid having separate pages for mobile/desktop. Ideally, an editor would add a shortcode around certain ...
0
votes
1answer
9k views
Why is this jquery / java script code not working in mobile / in devices?
I have following script in my header.php :
<script type="text/javascript">
/* to show back the left side bar back when the LEFT side bar is moved next/below to the center/content */
jQuery(...
0
votes
0answers
41 views
Getting extra image links in code with wp_get_attachment_image
I am using ACF to add image fields to some posts and returning the Image ID so that I can use wp_get_attachment_image to get responsive images. I have defined 960 and 1920 as the medium and large ...
2
votes
2answers
1k views
How can I make wp default gallery responsive?
I want my WP default gallery to go from 4 columns on computer screens down to 2 on mobile devices.
0
votes
2answers
232 views
Adding srcset to an image in ajax
I have this line of code :
$out .= get_the_post_thumbnail('', '', array( 'alt' =>
the_title_attribute (array('echo' => 0) ), 'class' =>
'img-responsive', 'srcset' => ...
1
vote
2answers
595 views
Video to stretch across the entire homepage [closed]
Where could I find a framework for a homepage where I can have an HTML video stretched all the way across (to a certain max resolution would be fine, like max-width: 2500px or something)?
I am using ...
1
vote
2answers
135 views
GIF featured image is resized on server but not used in frontend. Why?
I use a very basic setup of twentyseventeen and die most recent wp version. When I upload PNGs or JPGs they as a featured image, they are saved as a resized version on my uploads folder and used on ...
1
vote
3answers
1k views
Removing height and width from images with a caption
I am using WordPress with Twitter Bootstrap 3 and have an issue when it comes to images with captions.
Images with captions are given a height and width attribute which stops them from being ...
0
votes
1answer
35 views
built-in responsive images in content - do I need to add anything to functions.php?
I am making a WP theme from scratch and I don't seem to get the responsive images working. An image that's inserted at 500px will stay at 500px even though srcset and sizes tags are added. From my ...
0
votes
1answer
613 views
How to select which thumbnails sizes are displayed in srcset
I know that Wordpress has its way of letting the browser decide which image to download depending on the viewport via the srcset.
I also know that I can use the_post_thumbnail function and specify a ...
1
vote
2answers
856 views
ACF Plugin - Random Gallery Image with wp_get_attachment_image()
I’ve found others (source 1, source 2, source 3) using the following code for displaying a random gallery image (and it works) with the ACF Plugin:
<?php
$gallery = get_field('images');
$rand = ...
5
votes
1answer
3k views
How can I set image sizes and still have responsive images using the srcset attribute?
I have this function in my theme to create thumbnail sizes.
set_post_thumbnail_size( 620, 848, true );
if (function_exists('add_image_size')){
add_image_size( '...
0
votes
1answer
825 views
the_content not showing responsive image attributes srcset or sizes
I'm using WordPress 4.4.2, but am unable to get the new responsive images functionality to appear for the_content.
It works for featured images, just not the_content images.
I have no plugins ...
0
votes
3answers
1k views
Wp_List_Table not responsive
im using the wp_list_table class on my backend theme, to show some informations that i have saved on database, but there is a lot of informations and i want to make it responsive, show/hide some ...
0
votes
1answer
45 views
Reduce size of responsive title
When using a mobile device or a tablet, the titles of my products are cropped. I'd like to simply reduce their size. Take a look to the image:
Is there a way to change that? Is it CSS or Php?
The ...
1
vote
0answers
27 views
Translate a word in a responsive menu
The responsive menu of my web has a word in english: "back" and I have to translate it in Spanish: "atrás". Well, I'm not able to find the word to translate. It's not included in the pot file (...
0
votes
1answer
13 views
Website Tablet Check Out Field Issue
So on my website of http://www.camerabeanbags.co.uk/checkout/ if you set the browser to 768px wide the 'phone' and 'e-mail address' fields can not be clicked in for text to me typed in.
These work ...
0
votes
1answer
2k views
Add div after every 4 posts then every 2 posts for a responsive loop
I'm currently working on a Wordpress loop for my index posts page. The loop displays the posts in 4 columns (each post has a width of 25%, so 4 posts on the same row), my purpose is to insert after ...
-1
votes
1answer
969 views
How to make this splash page responsive
I need to create a simple responsive splash page where there is a full background image with a logo, text and CTA on the top half of the image.
The Mobile_View image is how the page looks when ...
0
votes
1answer
251 views
Understanding WordPress image sizes and responsive images
I just can’t understand how add_image_size() and responsive images work.
So let’s say I have a thumbnail like 720×360.
So I’m assuming I need to add the size
add_image_size('post-thumbnail', 720, ...
1
vote
1answer
458 views
Twenty fifteen theme - change responsive menu condition
So I want to move sidebar to the top of the page and hide it behind hamburger menu. Just to make it exactly like when the screen is smaller (tablet, smartphone), despite resolution.
So I thought ...
0
votes
2answers
2k views
Bootstrap navbar responsiveness on WordPress theme menu not working
The theme I am creating is not working correctly. The menu is not collapsing into mobile view with the hamburger icon when I decrease screen size. I can see all the classes when using the inspect tool ...
1
vote
1answer
899 views
Get a list of all image sizes that match aspect ratio of original one
I need the same functionality as default WordPress wp_calculate_image_srcset() method which returns the string for srcset:
image-300x200.jpg 300w, image-600x400.jpg 600w, ...
but it should return an ...
0
votes
1answer
171 views
Responsive Images with art direction
I've been thinking about how I would use responsive images in Wordpress. My site has a fixed height, full width thumbnail at the top of each post. The built in Wordpress implementation of responsive ...
37
votes
5answers
31k views
How do I disable responsive images in WP 4.4?
I succesfully converted my 4.3.1 install to all https. After updating to 4.4. I have a problem with the new srcset attribute. While the src attribute for images is set using https, the srcset ...
-1
votes
1answer
16 views
responsive screen not working [closed]
i already try to make this responsive like this: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, i want it like shrink like an image, whatever screen in it, it will match in the ...
6
votes
2answers
428 views
Create image formats with different qualities when uploading
I'm trying to come up with a solution where the generated image formats cover both responsive and high-resolution aspects when uploading a new item in the WP admin. I've put together a set of formats ...
0
votes
1answer
49 views
@media applying globally and not separately for each screen width [closed]
I have the 1920px stylesheet complete at a page width of 1560px. I'm trying to style the next width for 1366px screens using @media queries but when I change anything it changes globally.
I'm a ...
2
votes
3answers
2k views
How to use the responsive images feature from WP 4.4 in your themes
I don't really understand how I can use the new responsive images feature that WordPress provides in my themes.
Example:
In my theme, I add a header-image. I therefore use the custom-header-image ...
1
vote
1answer
43 views
@media in bluehost is being commented out [closed]
Bluehost which is hosting my WordPress files, doesn't seem to be reading my @media code.
Everything starting with an @ symbol is greyed out and is not being read at all which means my site is ...
1
vote
1answer
325 views
WP Responsive images - upload custom image sizes
I've been trying to find solution to my problem for the last couple of weeks without any luck. I've been finding that my theme and WP both fail to create proper responsive images. This especially goes ...
0
votes
0answers
88 views
How can I disable Jetpack plugin on mobile?
I'm using the Wordpress jetpack plugin to create a gallery on a WP site. However I want to disable it completely based on the visitors viewport, how can I achieve this?
