Questions tagged [responsive]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0
votes
1answer
247 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 ...
10
votes
3answers
11k views

make Wordpress image captions responsive

This webpage contains images inserted by Wordpress. The code used to insert the first image is: [caption id="attachment_887" align="alignnone" width="604"] <a href="http://steven.doig.com.au/...
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
49 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
278 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
179 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
2k 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
33 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
8k 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
37 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
188 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
350 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 ...
0
votes
2answers
98 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
29 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
488 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
675 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
747 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
978 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
25 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
26 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
933 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
192 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
394 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
1k 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
732 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
124 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
30k 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
366 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
47 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
35 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
262 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
79 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?
0
votes
1answer
102 views

Open Menu is not working in Mobile view [closed]

my website is www.ukikomerc.com and my open menu is not working in mobile view. I already try to deactivate plugins but still, I have the same problem. Please help.
0
votes
0answers
27 views

Show a page of non-standard-sized featured images

I've struggled with this for years. I have a category page where I want to show the post summaries in a card format using the featured image (260 x 175px). I have created a custom image size ...
-2
votes
1answer
930 views

Navigation menu, remove item from desktop

Using theme (and child theme) of Sailent, I'm trying to work out a way to completely remove a menu item from my navigation bar while on desktop. See site here: http://www.boinginflatables.com/...
0
votes
1answer
1k views

Change “posts per page” depending on width

I'm working on a responsive theme. One part is a sort of news flow (blog). In desktop widths (above 767px) the news template is vertically divided in two. The left part is a navigation which lists ...
0
votes
2answers
4k views

Move Sidebar from Above Content To Below When Responsive [closed]

My theme automatically puts the sidebar above the content rather than below it when going responsive/mobile. I am trying to figure out how I can get it to go below the content instead, as having it ...
0
votes
1answer
648 views

Responsive images in Bootstrap 4 slider

I have a Bootstrap 4 slider in progress at https://filathlos.imagewize.com/ . When I add images of a 0.75 ratio like 2000x1500 they display and resize well. 3000x2000 works too. This with them being ...
3
votes
2answers
2k views

Responsive background images added inline

I am setting the featured image as a background for the top part of the page. The images are quite large and I'd like to be able to set smaller image sizes for smaller screen sizes. Since the images ...
-2
votes
1answer
130 views

Custom page template not working on mobile

I have a child theme. Within the child theme, I have a custom page template. It work perfectly on a desktop. It is not working on my iPhone with the Safari browser. This is the template: <?php ...
0
votes
1answer
1k views

Custom responsive 'featured image' sizes

My home page has a carousel of 'featured (thumbnail) images' from posts. The carousel uses about two=thirds of the screen width and Google Page Speed Analyser complains that my images are too large. ...
1
vote
3answers
8k views

How to display a different image size for mobile

I have set up the following: add_image_size( 'featured-image', 1600, 450, true ); which is used to serve a full width image on the website I'm building, but, as you can imagine, for mobile this is ...
3
votes
3answers
15k views

How can I serve different images depending on screen size with wordpress

I am creating a responsive WordPress website with a mobile-first approach. When my client uploads an image for a blog post, I would like WordPress to then generate smaller versions of the image (with ...